- 33
- 525 043
CodePhilip
United States
Приєднався 1 сер 2019
If you're interested in Coding, Web Development, Raspberry Pi's or Technology, your in the right place.
Would you be interested in a habit tracker that visualizes your entire year with a heatmap?
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 interested or want updates on the project.
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 interested or want updates on the project.
Переглядів: 46
Відео
Accordion Element | JavaScript Tutorial
Переглядів 852 місяці тому
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
Переглядів 522 місяці тому
you can sign up to be notified when it gets released :) habitheat.com #habits #habittracker #selfimprovement
Coding my own Habit Tracker
Переглядів 612 місяці тому
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
Переглядів 1145 місяців тому
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
Переглядів 11 тис.8 місяців тому
#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
Переглядів 3,7 тис.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,1 тис.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
Переглядів 9012 роки тому
#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
Переглядів 233 тис.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 роки тому
📌 In this episode we will learn how to create Scroll Indicator 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 Demo visit: 🔗 / ⚜ For the Source Code and other Javascript Beginner Projects visit m...
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,6 тис.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,3 тис.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)
Переглядів 9114 роки тому
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,7 тис.4 роки тому
Recreating the Facebook Homepage with HTML & CSS (Grid, Flexbox)
Word Length Calculator | Javascript Beginner Project Tutorial
Переглядів 2,3 тис.4 роки тому
Word Length Calculator | Javascript Beginner Project Tutorial
This is really cool. Looking forward to it. :)
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
thank you for being honest and real not like other "perfect" coders who don't make mistakes
Man very strainght to the point Not like other youtubers add some this add some that css like not going to the logic part
YOU ARE THE BEST
--------------------------to uncheck the list by clicking on it--------------------------------- let addToDoButton = document.getElementById('addToDo'); let toDoContainer = document.getElementById('toDoContainer'); let inputField = document.getElementById('inputField'); addToDoButton.addEventListener('click', function(){ var paragraph = document.createElement('li'); paragraph.classList.add('paragraph-styling'); paragraph.innerText = inputField.value; toDoContainer.appendChild(paragraph); inputField.value = ""; paragraph.addEventListener('click', function(){ if(paragraph.style.textDecoration == "line-through"){ paragraph.style.textDecoration = "none"; } else{paragraph.style.textDecoration = "line-through"; } }) paragraph.addEventListener('dblclick', function(){ toDoContainer.removeChild(paragraph); }) })
It keeps saying I guessed too low even when I say 100, or even 500. Can I get some help?
Very simple but for removing just paragraph.style.display = 'none';
thank you sir for teaching.
thank you so much sir! really learnt alot today
could you please put the extension you use