-
Couldn't load subscription status.
- Fork 1.6k
New #931
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
Open
New #931
Changes from all commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
79a8757
Create readme.md
ziennaa 95a2135
Add files via upload
ziennaa e508efd
Delete habittracker/blueheartlight.jpg
ziennaa 6548519
Delete habittracker/blueflowerdark.jpg
ziennaa 3e3af18
Delete habittracker/darkblueback.jpg
ziennaa 6b0dabd
Delete habittracker/framevieoback.mp4
ziennaa cdd012d
Delete habittracker/heartsbackvideo.mp4
ziennaa 722164d
Delete habittracker/quoteback.jpg
ziennaa 1eb5b3b
Delete habittracker/redflowerbackplain.jpg
ziennaa 53e4cab
Delete habittracker/skygifback.gif
ziennaa bfa6175
Delete habittracker/twoteddyback.gif
ziennaa bc4a1fe
Enhance README with app details and features
ziennaa File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file added
habittracker/blueback.jpeg
Binary file added
habittracker/habiticon.png
95 changes: 95 additions & 0 deletions
habittracker/habittracker.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Habit Tracker</title> | ||
| <link rel="icon" type="image/x-icon" href="habiticon.png"> | ||
| <link href="https://fonts.cdnfonts.com/css/uchiyama" rel="stylesheet"> <!--font-family: 'Uchiyama', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/figuera-variable" rel="stylesheet"> <!-- font-family: 'Figuera Variable', sans-serif;----> | ||
| <link href="https://fonts.cdnfonts.com/css/merkurius" rel="stylesheet"> <!--font-family: 'Merkurius', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/floriella" rel="stylesheet"> <!--font-family: 'Floriella', sans-serif; --> | ||
| <link href="https://fonts.cdnfonts.com/css/nigelina-95312" rel="stylesheet"> <!--font-family: 'Nigelina', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/hellolucy" rel="stylesheet"> <!--font-family: 'HelloLucy', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/dylan-samuel" rel="stylesheet"> <!--font-family: 'Dylan Samuel', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/jelly-berry" rel="stylesheet"> <!----font-family: 'Jelly Berry', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/sushi-sushi" rel="stylesheet"> <!--font-family: 'Sushi Sushi', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/flighty" rel="stylesheet"> <!--font-family: 'Flighty', sans-serif; my new habit--> | ||
| <link href="https://fonts.cdnfonts.com/css/melodica" rel="stylesheet"><!--font-family: 'Melodica', sans-serif;my newhabit--> | ||
| <link href="https://fonts.cdnfonts.com/css/dreams-liem" rel="stylesheet"><!--font-family: 'Dreams Liem', sans-serif; year and month--> | ||
| <link href="https://fonts.cdnfonts.com/css/kulminoituva" rel="stylesheet"> <!--font-family: 'Kulminoituva', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/weighty" rel="stylesheet"><!--font-family: 'Weighty', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/bellasia" rel="stylesheet"> <!--font-family: 'Bellasia', sans-serif; mynewhabit--> | ||
| <link href="https://fonts.cdnfonts.com/css/naughty" rel="stylesheet"><!--font-family: 'Naughty', sans-serif;--> | ||
| <link href="https://fonts.cdnfonts.com/css/boismen" rel="stylesheet"><!--font-family: 'Boismen', sans-serif;--> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body> | ||
| <!-- TITLE AND SUBTITLE--> | ||
| <h1 id="title" class="maintitle">Year</h1> | ||
| <h2 id="titletwo" class="maintitle">Month</h2> | ||
| <h3 id="subtitle">Monthly Habit Tracker</h3> | ||
| <!--CALENDER AREA--> | ||
| <!--divs helps us to stay organised and add customization styling etc --> | ||
| <div id="calendercontainer"> | ||
| <div id="calenderdiv"> | ||
| <div id="calenderHeading"> | ||
| <p id="habitTitle">my new habit! <3</p> | ||
| <p> </p> | ||
| <p id="totaldays"> 0/31 </p> | ||
| </div> | ||
| <div id="calenderContent"> | ||
| <div id="tracker"> | ||
| <div class="days"> | ||
| <div class="day">1</div> | ||
| <div class="day">2</div> | ||
| <div class="day">3</div> | ||
| <div class="day">4</div> | ||
| <div class="day">5</div> | ||
| <div class="day">6</div> | ||
| <div class="day">7</div> | ||
| </div> | ||
| <div class="days"> | ||
| <div class="day">1</div> | ||
| <div class="day">2</div> | ||
| <div class="day">3</div> | ||
| <div class="day">4</div> | ||
| <div class="day">5</div> | ||
| <div class="day">6</div> | ||
| <div class="day">7</div> | ||
| </div> | ||
| <div class="days"> | ||
| <div class="day">1</div> | ||
| <div class="day">2</div> | ||
| <div class="day">3</div> | ||
| <div class="day">4</div> | ||
| <div class="day">5</div> | ||
| <div class="day">6</div> | ||
| <div class="day">7</div> | ||
| </div> | ||
| <div class="days"> | ||
| <div class="day">1</div> | ||
| <div class="day">2</div> | ||
| <div class="day">3</div> | ||
| <div class="day">4</div> | ||
| <div class="day">5</div> | ||
| <div class="day">6</div> | ||
| <div class="day">7</div> | ||
| </div> | ||
| <div class="days"> | ||
| <div class="day">1</div> | ||
| <div class="day">2</div> | ||
| <div class="day">3</div> | ||
| <div class="day">4</div> | ||
| <div class="day">5</div> | ||
| <div class="day">6</div> | ||
| <div class="day">7</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <button id="resetbutton">Reset</button> | ||
| <script src="script.js"></script> | ||
| </body> | ||
| </html> |
Binary file added
habittracker/loadinggifback.gif
33 changes: 33 additions & 0 deletions
habittracker/readme.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| # 🌸 Habit Tracker | ||
|
|
||
| A **simple and elegant Habit Tracker Web App** built using **HTML, CSS, and JavaScript**. | ||
| It allows users to set a monthly habit, track daily progress, and visualize completion status through an interactive calendar. | ||
| Progress is stored locally in your browser using **LocalStorage**, so your data persists even after refreshing or closing the tab. | ||
|
|
||
| --- | ||
|
|
||
| ## Features | ||
|
|
||
| - **Dynamic Calendar:** Automatically highlights the current day and displays all days of the current month. | ||
| - **Custom Habit Title:** Click on the title to set or update your habit anytime. | ||
| - **Local Storage Support:** Saves your daily progress persistently across sessions. | ||
| - **Progress Tracker:** Shows completed days count (e.g. `10/30`). | ||
| - **Reset Option:** Easily reset the calendar and start a new habit cycle. | ||
| - **Responsive and Aesthetic UI:** Uses custom fonts and soft color palettes for a pleasant experience. | ||
|
|
||
| --- | ||
|
|
||
| ## How It Works | ||
|
|
||
| 1. The script fetches the **current date, month, and year** using JavaScript’s `Date()` object. | ||
| 2. It dynamically fills the calendar grid with the days of the current month. | ||
| 3. You can **click each day** to mark it as "completed" — turns **pink** when selected. | ||
| 4. Progress (`true/false` for each date) is stored using `localStorage` with keys like `MM-DD-YYYY`. | ||
| 5. The total days completed are displayed and updated in real-time. | ||
| 6. The **Reset** button clears all progress for the current month. | ||
|
|
||
| --- | ||
|
|
||
| Build by [zienna](https://github.com/ziennaa) | ||
|
|
||
|
|
Binary file added
habittracker/ribbonback.jpg
133 changes: 133 additions & 0 deletions
habittracker/script.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| var date = new Date(); // creates a js date obj for current date n time | ||
| console.log(date); // shows full date time in console | ||
| // extract current date info | ||
| var currentYear = date.getFullYear(); | ||
| var curretMonth = date.getMonth(); | ||
| var currentDay = date.getDay(); | ||
| var currentDate = date.getDate(); | ||
| console.log(currentYear); | ||
| console.log(curretMonth); | ||
| console.log(currentDay); | ||
| console.log(currentDate); | ||
| // imp date info | ||
| var months = [ // this array maps month index 0 to 11 | ||
| 'January', | ||
| 'February', | ||
| 'March', | ||
| 'April', | ||
| 'May', | ||
| 'June', | ||
| 'July', | ||
| 'August', | ||
| 'September', | ||
| 'October', | ||
| 'November', | ||
| 'December' | ||
| ]; | ||
| // setting year and month | ||
| var yeart = document.getElementById("title"); | ||
| yeart.innerHTML = currentYear; | ||
| var title = document.getElementById("titletwo"); | ||
| title.innerHTML = months[curretMonth]; | ||
| //update calender information | ||
| var habitTitle = document.getElementById("habitTitle"); | ||
| habitTitle.onclick = function(){ | ||
| let habits = prompt("what's your habit?", habitTitle.innerHTML); | ||
| if(habits.length==0){ | ||
| habitTitle.innerHTML = "click to set your habit"; | ||
| }else{ | ||
| habitTitle.innerHTML = habits; | ||
| } | ||
| } | ||
| var daysinmonth = [31,28,31,30,31,30,31,31,30,31,30,31]; | ||
| var daysinthismonth = daysinmonth[curretMonth]; | ||
| var dayscompleted = 0; | ||
| var totaldays = document.getElementById("totaldays"); | ||
| totaldays.innerHTML = "0/"+daysinthismonth; | ||
| // set the calender days | ||
| var daycount = 0; | ||
| var rowcount = 0; | ||
| var days = document.getElementsByClassName("days"); | ||
| for(var i=0; i<days.length; i++){ | ||
| var day = days[rowcount].getElementsByClassName("day"); | ||
| for(var j=0; j<day.length; j++){ | ||
| if(daycount==currentDate-1){ // highliughts current day with border blaxk | ||
| day[j].setAttribute("style", "border: 2px solid black"); | ||
| } | ||
| if(daycount<daysinthismonth){ | ||
| day[j].innerHTML = daycount+1; | ||
| day[j].setAttribute("id", "day"+(daycount+1)); | ||
| daycount++; | ||
| }else{ | ||
| day[j].innerHTML=""; // unused boxes emptied and white | ||
| day[j].setAttribute("style", "background-color:white"); | ||
| } | ||
| } | ||
| rowcount++; | ||
| } | ||
| var completed = new Array(31); // blank array of 31 elements | ||
| for(var i=0; i<daycount; i++){ | ||
| var tempstring = // 6-12-2025 | ||
| "" + (curretMonth+1) + "-" + (i+1) + "-" + currentYear; | ||
| console.log("storing data: "+ tempstring); | ||
| var tempday = localStorage.getItem(tempstring); | ||
| console.log(tempday); | ||
| if(tempday==null || tempday == "false"){ | ||
| localStorage.setItem(tempstring, "false"); | ||
| }else if(tempday=="true"){ | ||
| dayscompleted++; | ||
| } | ||
| totaldays.innerHTML = dayscompleted + "/" + daysinthismonth; | ||
| } | ||
| console.log("completed array: "+ completed); | ||
| console.log("total days completed: "+ dayscompleted); | ||
|
|
||
| for(var i =0; i<currentDate; i++){ | ||
| var tempstring = | ||
| "" + (curretMonth+1) + "-" + (i+1) + "-" + currentYear; | ||
| console.log(tempstring); | ||
| var chosenday = localStorage.getItem(tempstring); | ||
| console.log(i+1 + ": "+ chosenday); | ||
| var chosendaydiv = document.getElementById("day"+ (i+1)); | ||
| if(chosenday==="true"){ | ||
| chosendaydiv.style.backgrounColor = "pink"; | ||
| }else if(chosenday==="false"){ | ||
| chosendaydiv.style.backgroundColor = "white"; | ||
| } | ||
| } | ||
| var daysdivs = document.querySelectorAll(".day"); | ||
| for(var i=0; i<currentDate; i++){ | ||
| daysdivs[i].onclick = function(e) { | ||
| var num = e.target.innerText; | ||
| var selecteddate = document.getElementById(e.target.id); | ||
| var storagestring = | ||
| "" + (curretMonth+1) + "-" + num + "-" + currentYear; | ||
| if(localStorage.getItem(storagestring)==="false"){ | ||
| selecteddate.style.backgroundColor = "pink"; | ||
| localStorage.setItem(storagestring, true); | ||
| dayscompleted++; | ||
| }else if(localStorage.getItem(storagestring)==="true"){ | ||
| selecteddate.style.backgroundColor = "white"; | ||
| localStorage.setItem(storagestring, false); | ||
| dayscompleted--; | ||
| } | ||
| totaldays.innerHTML = dayscompleted + "/" + daycount; | ||
| console.log(dayscompleted, currentDate); | ||
| if(dayscompleted === currentDate){ | ||
| alert("great progress"); | ||
| } | ||
| } | ||
| } | ||
| var resetb = document.getElementById("resetbutton"); | ||
| resetb.onclick = function() { | ||
| for(var i=0; i<daycount; i++){ | ||
| var tempstrings = | ||
| "" + (curretMonth+1)+"-"+(i+1)+"-"+currentYear; | ||
| console.log(tempstrings); | ||
| localStorage.setItem(tempstrings, "false"); | ||
| var curday = document.getElementById("day"+(i+1)); | ||
| curday.style.backgroundColor = "white"; | ||
| } | ||
| dayscompleted = 0; | ||
| totaldays.innerHTML = dayscompleted + "/" + daysinthismonth; | ||
| }; |
Binary file added
habittracker/smallribbonback.jpg
Binary file added
habittracker/strawberrylightpinkback.jpg
96 changes: 96 additions & 0 deletions
habittracker/style.css
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| body{ | ||
| background-image: url("ribbonback.jpg"); | ||
| background-size: 1800px; | ||
| background-color: rgb(248, 203, 229); | ||
| text-align: center; | ||
| background-blend-mode: lighten; | ||
| font-family: "Dreams Liem"; | ||
| font-size: 50px; | ||
| font-weight: bolder; | ||
| line-height: 1; | ||
| } | ||
| .maintitle{ | ||
| line-height: 10px; | ||
| margin-top: 100px; | ||
| } | ||
| #title{ | ||
|
|
||
|
|
||
| } | ||
| #titletwo{ | ||
| margin-top: 35px; | ||
|
|
||
| } | ||
| #subtitle{ | ||
| opacity: 0.7; | ||
| font-size: 45px; | ||
| margin-bottom: 20px; | ||
| margin-top: 80px; | ||
|
|
||
| } | ||
| #calendercontainer{ | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 10px; | ||
| font-weight: 1000; | ||
|
|
||
| } | ||
| #calenderdiv{ | ||
| background-color: aliceblue; | ||
| border-radius: 10px 10px 20px 20px; | ||
| margin: auto; | ||
| align-content: center; | ||
| margin-bottom: -1px; | ||
| } | ||
| #calenderHeading{ | ||
| display: flex; | ||
| justify-content: space-between; | ||
| border-radius: 10px 10px 0px 0px; | ||
| border: 2px solid black; | ||
| padding: 7px 50px; | ||
| font-size: 20px; | ||
| background-color: pink; | ||
| font-family: "Kulminoituva"; | ||
| } | ||
| #habitTitle{ | ||
| text-align: left; | ||
| padding-right: 90px; | ||
| font-size: larger; | ||
|
|
||
| } | ||
| #totaldays{ | ||
| text-align: right; | ||
| margin-top: 45px; | ||
|
|
||
| } | ||
| #calenderContent{ | ||
|
|
||
|
|
||
| } | ||
| #tracker{ | ||
| padding: 20px; | ||
| border-width: 1px solid black; | ||
| font-family: "Uchiyama"; | ||
| } | ||
| .days{ | ||
| display: flex; | ||
| justify-content: center; | ||
| padding: 10px; | ||
| border: 1px; | ||
| border-width: 1; | ||
| opacity: 0.7; | ||
| } | ||
| .day{ | ||
| width: 45px; | ||
| margin: 10px; | ||
| padding: 3px; | ||
| font-size: 15px; | ||
| font-weight: 100; | ||
| text-align: center; | ||
| border-radius: 10px; | ||
| /*border: 2px solid rgb(247, 247, 247); | ||
| background-color: pink;*/ | ||
| } | ||
| #resetbutton{ | ||
| margin: 50px; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.