Educational Website

Lesson One: Image Slider

Sliders are effective ways of conveying information through images or adding some much needed visual clarity to whatever type of web you are designing. it is important to make use of these when necessary

<!DOCTYPE html>
                            <html>
                            <style>
                            .box1
                            {
                                width: 100%;
                                height: auto;
                                position: absolute;
                                background-color: yellow;
                            }
                            .box2
                            {
                                width: 100%;
                                height:auto;
                                position: absolute;
                                color: red;
                            }
                            .box3
                            {
                                width: 100%;
                                height: auto;
                                position: absolute;
                                background-color: green;
                            }
                            .slideshowContainter
                            {
                                max-width: 1000px;
                                position: relative;
                                margin: auto;
                            }
                            .prev, .next
                            {
                                cursor: pointer;
                                position: absolute;
                                top: 50%;
                                width: auto;
                                padding: 16px;
                                margin-top: -22px;
                                color: white;
                                font-weight: bold;
                                font-size: 18px;
                                transition: 0.6s ease;
                                border-radius: 0 3px 3px 0;
                                user-select: none;
                            }
                            .next
                            {
                                right: 0;
                                border-radius: 3px 0 0 3px;
                            }

</style> 
                        </head>
                        <body>
                            <div class="slideshowContainer">

</div>
                                
                                <div class="mySlides">
                                  <div class="numbertext">2 / 3</div>
                                  <div class="box2" style="width:100%">

</div>
                                
                                <div class="mySlides">
                                  <div class="numbertext">3 / 3</div>
                                  <div class="box3" style="width:100%">
                                </div>
                                
                                <a class="prev" onclick="plusSlides(-1)">❮</a>
                                <a class="next" onclick="plusSlides(1)">❯</a>
                                
                                </div>
                                <br>
                            </div>
                            <script>
                                let slide_Index = 1;
                                showSlides(slide_Index);

function plusSlides(n) 
                                {
                                    showSlides(slide_Index += n);
                                }

function currentSlide(n) 
                                {
                                    showSlides(slide_Index = n);
                                }

1 / 3

2 / 3

3 / 3

❮ ❯

Lesson Two: Modal Dialog

Modal Dialogues is a way for designers to combine a pop-up window with a flow action as the front most screen where the user is working. The dialogue box becomes centered in the viewing area, and the user becomes unable to continue any other work until they submit the form or dismiss the modal dialogue

<html>
                                <head>
                                    <meta name="viewport" content="width=device-width, initial-scale=1">
                                    <style>
                                        .modal
                                        {
                                            display: none;
                                            position: fixed;
                                            z-index: 1;
                                            padding-top: 100px;
                                            left: 0;
                                            top: 0;
                                            width: 100%;
                                            height: 100%;
                                            overflow: auto;
                                            background-color:rgba(0,0,0,);
                                            background-color:rgba(0,0,0,0.4)
                                        }
                                        .modalContent
                                        {
                                            background-color: grey;
                                            margin:auto;
                                            padding: 20px;
                                            border: 1px solid black;
                                            width: 80%;
                                        }
                                        .close
                                        {
                                            color: darkslategrey;
                                            float: right;
                                            font-size: 28px;
                                            font-weight: bold;
                                        }
                                        .close:hover,
                                        .close:focus 
                                        {
                                            color: #000;
                                            text-decoration: none;
                                            cursor: pointer;
                                        }
                                        .modalHeader
                                        {
                                            padding: 2px 16px;
                                            background-color: blue;
                                            color: white;
                                        }   
                                        .modalBody
                                        {
                                            padding:2px 16px;
                                        }
                                        .modalFooter
                                        {
                                            padding: 2px 16px;
                                            background-color: blue;
                                            color: white;
                                        }
                                        
                                    </style>
                                </head>
                                <body>
                                    <button id="bigButton">Click Me!</button>
                                    <div id="myModal" class="modal">
                                        <div class="modalContent">
                                            <div class="modalHeader">
                                            <span class="close">×</span>
                                            <h3>The Header</h3>
                                            </div>
                                            <div class="modalBody">
                                                <p>And this is how Modals work</p>
                                            </div>
                                            <div class="modalFooter">
                                                <h4>The Footer</h4>
                                            </div>
                                        </div>
                                    </div>
                                    <script>
                                        var modal = document.getElementById("myModal");
                                        var button = document.getElementById("bigButton");
                                        var span = document.getElementsByClassName("close")[0];
                                        button.onclick = function()
                                        {
                                            modal.style.display = "block";
                                        }
                                        span.onclick = function()
                                        {
                                            modal.style.display = "none";
                                        }
                                        window.onclick = function(event)
                                        {
                                            if (event.target == modal)
                                            {
                                                modal.style.display = "none";
                                            }
                                        }
                                    </script>
                                </body>
                                </html>

Lesson Three: Validation

Validation is a great way for developers to use Javascript to validate information for users. If a form field is empty a function can be set up to alert a message and prevent any false forms from being submitted

<!DOCTYPE html>
                            <html>
                            <body>
                            
                            <h2>Validation example</h2>
                            
                            <p>Please input a number between 1 and 10:</p>
                            
                            <input id="numb">
                            
                            <button type="button" onclick="myFunction()">Submit</button>
                            
                            <p id="example"></p>
                            
                            <script>
                            function myFunction() 
                            {
                              let x = document.getElementById("numb").value;
                              let text;
                              if (isNaN(x) || x < 1 || x > 10) {
                                text = "Input not valid";
                              } else {
                                text = "Input OK";
                              }
                              document.getElementById("example").innerHTML = text;
                            }
                            </script>
                            
                            </body>
                            </html>

Validation Example

Please input a number between 1 and 10:

Responsive and Interactive Design

Validation and Models

Lesson One: Image Slider

Lesson Two: Modal Dialog

Lesson Three: Validation

Validation Example