Question

In: Computer Science

Create a web application for a daily planner in HTML. Please include testing in the files...

Create a web application for a daily planner in HTML. Please include testing in the files and show correct code formatting.

Solutions

Expert Solution

Here is HTML code for a Daily Planner (To-Do List). Along with screenshots of the web application.

<html>

    <head>

        <title>Daily Planner</title>

    </head>

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <body>

        <h3 id="date"></h3>

        <p> Today's Tasks</p>

        <div id="taskDisplay" class="card scroll" style="overflow:auto; width:300px; height:300px;">

                

            <div id="taskList">

            </div>

            

        </div>

        <br><br>

        <div class="form-inline">

            <input class="form-control" style="width:200px; margin-right:20px;" type="text" placeholder="Enter Task Here" required id="task">

            <button class="btn btn-info" onclick="addTask(document.getElementById('task').value)">Add Task</button>

        </div>

        

        <div id="helperText" style="display: none"><font color=red size=2>Please enter some text</font></div>

        <script>

            let i = 1;

            function addTask(task){

                if(task!=''){

                    

                    document.getElementById("taskList").innerHTML += `<div id="task${i}">

                    <input type="checkbox" id="ch${i}" name="horns" onclick=toggleTask('${i}')>

                    <label for="task" id="to-do${i++}">${task}</label>

                    </div>`;

                    document.getElementById("task").value="";

                    document.getElementById('helperText').style.display='none';

                   

                }else{

                    document.getElementById('helperText').style.display='block';

                

                }   

                

            }

            function toggleTask(i){

              

                document.getElementById('ch'+i).setAttribute('checked', 'true');

                

                const divId = 'to-do'+i;

                

                const html = document.getElementById(divId).innerText.strike();

                

                document.getElementById(divId).innerHTML = html;

            }

            function calcDate(){

                const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

                var dateObj = new Date();

                var month = dateObj.getUTCMonth(); //months from 1-12

                var day = dateObj.getUTCDate();

                var year = dateObj.getUTCFullYear();

                newdate = day+" "+monthNames[month]+" "+year;

                return newdate;

            }

            document.getElementById('date').innerHTML = calcDate();

        </script>

    </body>

</html>


Related Solutions

1. An HTML document that’s generated by a web application is a ________________________ web page. 2....
1. An HTML document that’s generated by a web application is a ________________________ web page. 2. An easy way to log the progress of an application in Chrome’s Console panel is to insert __________________ methods at critical points in the code. 3. The childNodes property of a DOM object returns a/an ______________________ of the child nodes for that object. 4. The ___________________ method of an array can be used to concatenate the elements of the array into a single string.​...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...
Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...
Create a web page using PHP and HTML that contains a list of movie names available...
Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...
(a) Create a HTML page for a single faceted search selector. It will include the name...
(a) Create a HTML page for a single faceted search selector. It will include the name of the facet and a list of radio buttons or tick boxes for each category. (b) Add a button called filter. When the button is clicked the radio button or tick boxes will be read to determine if a selection has been made. The selection will be written to a div element located under the filterbutton. If no selection was made, then an appropriate...
Generate a modest Web page via Python flask. It should include basic components of HTML. The...
Generate a modest Web page via Python flask. It should include basic components of HTML. The Web page should have at least three Headings(<h1>), a paragraph (<p>), comments (<!-- -->), ordered list, unordered list, three links to website, and should display time & date.
Create a mockup of your web application that will display a list of favorites. Remember, this...
Create a mockup of your web application that will display a list of favorites. Remember, this can be a list of any favorite items, such as books, movies, restaurants, music, and so on. Your web application should contain at least 3 pages (HTML documents). Your mockup should contain mockups of each HTML document. You should follow a similar format as the sample mockup provided here. Your 5-6-page document should include the following: A description of the site's organizational structure. A...
Assignment - Store Design and code a HTML/CSS/JS based web application for your online store. Assignment...
Assignment - Store Design and code a HTML/CSS/JS based web application for your online store. Assignment Specification · Minimum of SIX web pages are required for this assignment: § One Landing/Container Page ( a page with logo) § One Home Page § Three or more Product Line Pages (pages with product and it information ) § One Order Page (for customer to order a product after view the profuct on the product page) · Build internal CSS style sheets in...
Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of...
Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of the images from lab 2 in approximately the center of the page; centering need not be exact. Below the image, place three button elements labeled with the names of items from lab 2. (One of them must be the name of the item you chose to display.) Pressing a button should change the displayed image to that of the item named on the button....
Create a Web application that display an animal classification. For the classification uses the given csv...
Create a Web application that display an animal classification. For the classification uses the given csv file: test1.csv (open up the csv file in any no-code insertion text editor like: notepad, wordpad (windows); or vi, emacs, nano, pico (Macs) – just plain text editor NOT word processor like Word, Pages, etc). The csv file contains information on the types, traits, and examples of animal classification. Give the user the following options (it can be in radio buttons) to see the...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT