- 34
- 533 830
CodePhilip
United States
Приєднався 1 сер 2019
If you're interested in Coding, Web Development, Raspberry Pi's or Technology, your in the right place.
I built my DREAM Habit Tracker
Hey, I finally finished the basics of my habit tracker after 6 months of working on it and im now ready to show it to you guys so you can try it out and give me some feedback. This is really just the foundation and I want to add a ton of stuff to it, mainly different tracking types and also more statistics.
habitheat.com/
#habits #habittracker #saas
habitheat.com/
#habits #habittracker #saas
Переглядів: 70
Відео
Would you be interested in a habit tracker that visualizes your entire year with a heatmap?
Переглядів 842 місяці тому
Here is the link: habitheat.com. I would love to hear your feedback! I was inspired by GitHubs heatmap for tracking commits and thought it would be cool to track habits the same way. So I built this tool to visualize your habits with a heatmap and provide helpful statistics. It is still in development, but I have launched a landing page where you can sign up with your email if you are intereste...
Accordion Element | JavaScript Tutorial
Переглядів 1414 місяці тому
Yo, I show you how to create an accordion element. Its a button that reveals some text like for example in a FAQ section. #javascript #html #css
I built this neat habit tracker using a heatmap for visualization
Переглядів 644 місяці тому
you can sign up to be notified when it gets released :) habitheat.com #habits #habittracker #selfimprovement
Coding my own Habit Tracker
Переглядів 684 місяці тому
Sorry for bad quality im on vacation. In this video, I show the progress I’ve made on my Habit Tracker SaaS so far. You’ll see a demo of the current features, including the different tracking types and the distinction between the free and premium versions. This is just the beginning-more updates will follow as I continue to develop the project. If you’re interested in staying updated, make sure...
How to code a wordpress plugin | coding session #coding #wordpress
Переглядів 1207 місяців тому
Hey whatsup. Today I want to start learning wordpress plugin development. I found a nice little "Hello World" project and with the help of chatGPT I managed to get it running. It is a simple plugin which just display a text anywhere you want in on the wordpress page using hooks and a shortcode. I also implemented a button in the admin dashboard sidebar to add some settings like changing the tex...
Save To Do List in Browser (NO DATABASE NEEDED) | JavaScript Beginner Project
Переглядів 14 тис.9 місяців тому
#javascript #todolist #localstorage 📌 In this episode we will learn how to create a To Do List that uses LocalStorage which is like a database inside your browser on the client side, so no backend is needed! Im using HTML, CSS and JavaScript. 📢 Subscribe if you want more Javascript Beginner Project Tutorials 👍 Leave a like if you enjoyed it 📢 If you have feedback or suggestions for projects tha...
How to Change the Favicon on your Wordpress Website
Переглядів 4202 роки тому
Hello Everyone, today I want to show you how to change your Favicon (the little Icon in your Tab) on a Wordpress Website. Thanks for Watching!
How to Connect JavaScript and CSS to a HTML File
Переглядів 4,4 тис.2 роки тому
#html #webdevelopment #javascript #css Hello Everyone, today I want to show you how to connect a JavaScript and CSS file to a HTML File. With the "link" and "script" tag. I use a HTML Button to change the Background Color of the HTML File with JavaScript code. Thanks for Watching! Source Code: justpaste.it/8xksu
How to Embed a YouTube Video in a HTML File
Переглядів 4,6 тис.2 роки тому
#html #webdevelopment #tutorial Hello Everyone, today I want to show you how to Embed a UA-cam Video into your HTML Webpage. We create a basic HTML File and then go to the UA-cam Video that you want to embed. There you can Copy the iframe of that Video and paste it into your HTML File. Thanks for Watching! Source Code: justpaste.it/39icx
Raspberry Pi Pico - How to Control the Onboard LED
Переглядів 9512 роки тому
#raspberrypi #coding #microcontroller Hello Everyone, today I want to show you how to control the onboard LED on a Raspberry Pi Pico. You will need a Raspberry Pi Pico and a USB Cable to connect it to your PC. Also you will need to download Thonny: thonny.org/ The Source Code to light the LED: from machine import Pin led = Pin("LED", Pin.OUT) # Change Value to 1(on) or 0(off) led.value(1) # One...
How to install a WordPress Theme (and where to find them)
Переглядів 342 роки тому
#wordpress #themes #webdevelopment Hello everyone, today I will be showing you how to find and Install a WordPress Theme. Free WordPress Themes can be found on the official WordPress website: de.wordpress.org/themes/ Themes that cost money can be bought here: themeforest.net/ and if you want to build your own Theme you can buy Elementor: (thats what I personally use for projects) be.elementor.c...
How to Install and Run a WordPress Website Locally on your PC
Переглядів 1382 роки тому
#Wordpress #webdevelopment #xampp Hello Everyone, in this Video I will be showing you how to run and install a WordPress Website locally on your PC with XAMPP. Usually you would install WordPress locally to develop a website. The Website is not online, so no one can visit it except you through your Computer. XAMPP Download Link: www.apachefriends.org/de/index.html WordPress Download Link: de.wo...
To Do List | Javascript Beginner Project Tutorial
Переглядів 236 тис.4 роки тому
#javascript #todo #todolist 📌 In this episode we will learn how to create a To Do List with html, css and javascript. 📢 Subscribe if you want more Javascript Beginner Project Tutorials 👍 Leave a like if you enjoyed it 📢 If you have feedback or suggestions for projects that I could build, please tell me in the comments below. ⚜ For the Source Code and other Javascript Beginner Projects visit my ...
Pomodoro Timer | Javascript Beginner Project Tutorial
Переглядів 15 тис.4 роки тому
📌 In this episode we will learn how to create a Pomodoro Timer with html, css and javascript. 📢 Subscribe if you want more Javascript Beginner Project Tutorials 👍 Leave a like if you enjoyed it 📢 If you have feedback or suggestions for projects that I could build, please tell me in the comments below. ⚜ For the Source Code and other Javascript Beginner Projects visit my GitHub Page: ⚜ ▶️ github...
Scroll Indicator | Javascript Beginner Project Tutorial
Переглядів 1,7 тис.4 роки тому
Scroll Indicator | Javascript Beginner Project Tutorial
Change CSS Styles with JavaScript | Javascript Beginner Project Tutorial (DOM)
Переглядів 1,9 тис.4 роки тому
Change CSS Styles with JavaScript | Javascript Beginner Project Tutorial (DOM)
Image Slider | Javascript Beginner Project Tutorial
Переглядів 3,7 тис.4 роки тому
Image Slider | Javascript Beginner Project Tutorial
Countdown Timer | Javascript Beginner Project Tutorial
Переглядів 24 тис.4 роки тому
Countdown Timer | Javascript Beginner Project Tutorial
Tip Calculator | Javascript Beginner Project Tutorial
Переглядів 11 тис.4 роки тому
Tip Calculator | Javascript Beginner Project Tutorial
BMI Calculator | Javascript Beginner Project Tutorial
Переглядів 8 тис.4 роки тому
BMI Calculator | Javascript Beginner Project Tutorial
Weight Converter | Javascript Beginner Project Tutorial
Переглядів 4 тис.4 роки тому
Weight Converter | Javascript Beginner Project Tutorial
Meter to Feet Converter | Javascript Beginner Project Tutorial
Переглядів 2,4 тис.4 роки тому
Meter to Feet Converter | Javascript Beginner Project Tutorial
Show Day of the Week | Javascript Beginner Project Tutorial
Переглядів 7 тис.4 роки тому
Show Day of the Week | Javascript Beginner Project Tutorial
Number Guessing Game | Javascript Beginner Project Tutorial
Переглядів 35 тис.4 роки тому
Number Guessing Game | Javascript Beginner Project Tutorial
Random Quote Generator | Javascript Beginner Project Tutorial
Переглядів 23 тис.4 роки тому
Random Quote Generator | Javascript Beginner Project Tutorial
Recreating the DuckDuckGo Homepage with HTML & CSS (Grid, Flexbox)
Переглядів 9224 роки тому
Recreating the DuckDuckGo Homepage with HTML & CSS (Grid, Flexbox)
Recreating the Twitter Homepage with HTML & CSS (Grid, Flexbox)
Переглядів 1,3 тис.4 роки тому
Recreating the Twitter Homepage with HTML & CSS (Grid, Flexbox)
Simple Counter | Javascript Beginner Project Tutorial
Переглядів 30 тис.4 роки тому
Simple Counter | Javascript Beginner Project Tutorial
Recreating the Facebook Homepage with HTML & CSS (Grid, Flexbox)
Переглядів 1,8 тис.4 роки тому
Recreating the Facebook Homepage with HTML & CSS (Grid, Flexbox)
Greetings, I sign up to see how it works, I found a bug, probably just a CSS quick fix, it's when you hover the mouse over the option button. BTW I'm using chrome to navigate your site. well done creating this site
This is so good, wanna collaborate?
Thank you :D Send me a DM on twitter @habitheat
This is still in development so there are probably a thousand bugs but I will fix them one after another and add more stuff! Let me know what you think or if you have ideas for improvements or features that you would like to see. Thank you for watching :) Here is the link: habitheat.com/
Nice vid,
Thank you :)
Thank you :)
i was here for the thumbnail css
Thanks mate. Those who gets error for the loadtasks function clear your local storage!
Thank you for your comment :)
the best channel about IT
Thank you :)
shitty
Wow! Real nice
Thank you
This is really cool. Looking forward to it. :)
Thank you! I will try to launch in December, you can sign up to get notified on my landingpage! habitheat.com/
This is the most simple and easier todoList lesson that I never met on line. I will start my journey with this. Thank you very much man.
Thank you! Im glad you enjoyed it. You might also be interested in my no to do list video which lets you save your to do list!
tesekkurler guzel anlatim olmus.
awesome lesson, thanks!
i got an error undefine in add task
Can you add your code?
This video helped me in my studies =]
Nice :)
thank you very much i was stuck on this assignment for like 3 days and tried many things refered many code and stuffs but couldnt understand much but you man saved my. made the concept crystal clear.
I like it 🔥🔥
Functino pizzeria🤌🤌
Great work,bro I have a quest, Why we use math.floor(math.random()*quotes.length).
Thank you, we use that expression to randomly select one of the quotes from our array.
Thanks
No problem :)
I have one question I'm newbie at IT Programing Now I'm learning JavaScript first. How do we create dashboard by using only button on front then it will redirect to dashboard?
Hey, do you mean like a dashboard for a logged in user where he can see for example his own to do list?
Yes exactly bro
@@markjosephortizano5084 Thats a bit more complicated because we need to add user authentication and for that we need a backend language or framework like node.js for javascript or what I like to use is php. You will also need a database to store the user data. I plan on doing a tutorial about that soon!
Thanks for watching! If you’re excited about this project, make sure to check out Habitheat.com/ to join the waitlist and get notified when I launch. 🚀 Also, let me know in the comments what features you’d like to see next or any feedback you have. Your input is super valuable as I continue to develop this habit tracker. Don’t forget to subscribe for more updates!
A SIMPLE FUCKING SIMPLE TO DO LIST. I LOVE YOU MY DUDE!
No Problem brother <3 Checkout my new to do list tutorial using localstorage to save your todos even after page refresh :)
Yeah man good way. Just the basic and i put the unicorns
you can sign up to my waitlist to get notified when I launch it habitheat.com/
the picture in the back caught my attention, what kind of picture is this?
Its a tapestry I bought from amazon, just search for „mushroom tapestry“ or something :)
great thank you !
22:54 that silent moment was so relatable and so funny
Question why didn’t you use live-server to update between code instead of reloading the page ?
Hey, thats a good question, I guess I just didnt knew about live server back then.
@@CodePhilipYT it’s alright that you don’t use it but it would of been efficient
I did this, it is amazing! But everytime I refresh or close tab, I lose the number where I previously left off. How do I make it such that everytime I refresh, i still get the previously stored number?
Hey, for that u need to store the value. You could use a database or localstorage. Maybe you can read into that. You will need to run it on a server though, for local development xampp is best as you can also use sql databases there! Good luck
@@CodePhilipYT Thanks for replying! I managed to implement firebase firestore in my project and it worked out pretty well for me. Will certainly try out the other forms of databases in the near future.
@@DamosyTheFreckle Hey, glad it worked :D
Any command to control output state with out toggle..?
Hello thanks baba But ur video no clear at all oooo
Thank you for this great tutorial I learned a lot. I have a question about how you handle the delete text. Wont the you code used in the video make any delete word get deleted ? What if i wanted to add a note about delete old files for example ?
Hey, you can create tasks with the word delete and it will work just fine!
Short, precise and clear. Thank you!
Thank you :)
This video was SOOO helpful. I have been banging my head against a wall trying to find a tutorial for a todo list for beginners and everyone claims they are for beginners but are really way more detailed and advanced making it so much more confusing than it needs to be and this version you put out was so straightforward and easy to code along with and understand. Thanks so much for posting! You saved my sanity! My next project to tackle is a memory game any chance you want to help with that!???
During the journey of creating the To-Do List, I enjoyed it as well! Hehe, I love the process of building project.
i like the way you said you are a beginner and there are some better way to do it.. thats so humble. 4 years later i hope you now an advance devlopper.............
Thank you so much.. I am a subscriber now..
Thx for solving my doubt 🧐👍💪🫡
simple as you like
Hello, I was looking at your video channel. We may be helping a company that uses secure images to increase supply chain security and help cloud native development. Would you be willing to help try their software, make a video, and help show devs how to use their tools? This is not an offer, but just to start a conversation about your willingness to take on sponsorship. Please provide me with your email if you are interested. You'd have a chance to look at their technology and decide if it's the type of software that you'd be interested in covering in your channel.
do you have the source to the code?
Here is the javascript code: const addButton = document.getElementById('addTask'); const taskInput = document.getElementById('taskInput'); const taskList = document.getElementById('taskList'); loadTasks(); function addTask() { const task = taskInput.value.trim(); if (task) { createTaskElement(task); taskInput.value = ''; saveTasks(); } else { alert('Please enter a task!') } } addButton.addEventListener('click', addTask); function createTaskElement(task){ const listItem = document.createElement('li'); listItem.textContent = task; const deleteButton = document.createElement('button'); deleteButton.textContent = 'Delete'; deleteButton.className = 'deleteTask'; listItem.appendChild(deleteButton); taskList.appendChild(listItem); deleteButton.addEventListener('click', function(){ taskList.removeChild(listItem); saveTasks(); }); } function saveTasks() { let tasks = []; taskList.querySelectorAll('li').forEach(function(item) { tasks.push(item.textContent.replace('Delete', '').trim()); }); localStorage.setItem('tasks', JSON.stringify(tasks)); } function loadTasks() { const tasks = JSON.parse(localStorage.getItem('tasks')) || []; tasks.forEach(createTaskElement); }
@@pawanbakle2893 Hey, here is the css: body { font-family: Arial, sans-serif; } .container { text-align: center; margin: 0 auto; width: 50%; } h1 { color: #333; } ul { list-style-type: none; padding: 0; } li { margin: 5px 0; display: flex; justify-content: space-between; align-items: center; background-color: #f7f7f7; padding: 8px; border-radius: 5px; } .deleteTask { background-color: #ff6b6b; color: white; border: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; } And here is the HTML Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>To Do List</title> </head> <body> <div class="container"> <h1>To-Do List</h1> <input type="text" id="taskInput" placeholder="Add a Task"> <button id="addTask">Add</button> <ul id="taskList"> <!-- li Element --> </ul> </div> <script src="script.js"></script> </body> </html>
Bro! Where have you been.....? Uploading a year later???
I stopped coding but got back interested in it :)
How did u pit the right guessing sir
I really appreciate the step-by-step and thorough explanation. So much better than those tutorials that don't explain anything!
Thank you!
Hey guys, I made a new tutorial for a to do list which can also save your tasks on page refresh. You can do that by using the localStorage in the browser. If youre interested check it out: To Do List with LocalStorage (Save To Do's in Browser!) | JavaScript Beginner Project ua-cam.com/video/p6F5TBxs88A/v-deo.html
extreme underrated.......⭐⭐⭐⭐⭐
than for this lesson! It helped me!
Undefined error
this totural sucks