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.​...
FOR HTML Web scripting Complete the following: Create and test an HTML document that has six...
FOR HTML Web scripting Complete the following: Create and test an HTML document that has six short paragraphs of text that describe various aspects of the state in which you live. You must define three different paragraph styles, p1, p2, and p3. The p1 style must use left and right margins of 20 pixels, a background color of pink, and a foreground color of blue. The p2 style must use left and right margins of 30 pixels, a background color...
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.
 In this exercise, you will create two external style sheet files and a web page. You...
 In this exercise, you will create two external style sheet files and a web page. You will experiment with linking the web page to the external style sheets and note how the display of the page is changed. Create an external style sheet (call it format1.css) to format as follows: document background color of white, document text color of #000099, and document font family of Arial, Helvetica, or sans-serif. Hyperlinks should have a background color of gray (#CCCCCC). Configure the...
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...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT