jendoe0110.github.io/part1_7.html at main · jendoe0110/jendoe0110.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
    <title>Part 1 - Style Interaction</title>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
    <style>
        body {
            background-color: grey;
            font-family: Arial, sans-serif;
            color: white;
        }

        a {
            display: inline-block;
            background-color: pink;
            color: black;
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 5px;
            text-decoration: none;
        }

        a:hover {
            background-color: #ff69b4; /* Lighter shade of pink for hover effect */
        }
    </style>
</head>
<body>
    <h1>Interactive Style Editor</h1>
    <main id="content-area">
        <p>Welcome to the Interactive Style Editor! Here, you can change the background color of this text area. Choose a color from the options below and see the background change in real-time.</p>
        <p>Want to emphasize certain words? Use the checkboxes below to apply bold, italic, or underline styles to this entire text area. Feel free to combine these styles as you wish.</p>
        <p>Adjust the font size of this text by selecting an option from the dropdown menu. Watch as the text grows or shrinks to match your selection. This is a great way to see how different font sizes impact the readability of content.</p>
    </main>
    <form id="style-form">
        Background Color:
        <input type="radio" name="bgcolor" value="lightblue"> Light Blue
        <input type="radio" name="bgcolor" value="lightgreen"> Light Green
        <br>
        Text Style:
        <input type="checkbox" name="textstyle" value="underline"> Underline
        <input type="checkbox" name="textstyle" value="bold"> Bold
        <input type="checkbox" name="textstyle" value="italic"> Italic
        <br>
        Font Size:
        <select name="fontsize">
            <option value="16px">16px</option>
            <option value="18px">18px</option>
            <option value="20px">20px</option>
        </select>
    </form>
    <a href="homework7.html">Back to Homework 7</a>
</body>
<script>
    $(document).ready(function() {
        $('#style-form input, #style-form select').change(function() {
            applyStyles();
        });
    });

    function applyStyles() {
        var bgcolor = $('input[name="bgcolor"]:checked').val();
        var fontsize = $('select[name="fontsize"]').val();
        var textstyle = $('input[name="textstyle"]:checked').map(function() {
            return this.value;
        }).get();

        $('#content-area').css('background-color', bgcolor);
        $('#content-area').css('font-size', fontsize);
        $('#content-area').css('font-weight', textstyle.includes('bold') ? 'bold' : 'normal');
        $('#content-area').css('font-style', textstyle.includes('italic') ? 'italic' : 'normal');
        $('#content-area').css('text-decoration', textstyle.includes('underline') ? 'underline' : 'none');
    }
</script>
</html>