Notes App
Hi there! I'm trying to create a notes app using html, css and JavaScript. For now i have worked with html and css but here are a couple of issues
• the tooltip for the plus icon of new notebooks button is not converting into lower case
• also i have added the dark theme using the toggle button. For the light theme all the properties are working but when i toggle to dark theme. I have tried to change the colors of some properties but they are not changing. Some colors are changed like for the body bg,aside bg,new note btns bg colors are changed but when i try to change the search container and search field bg color they are not changing. Also when i hover over the new note btn, the moon icon and the plus icon of new notebooks btn their color are not changing
I have applied all the colors properties in my code pen their some are working and some are not
Here is the link to code pen.
https://codepen.io/Myra-Gull/pen/XJWyLXa
12 Replies
The first one you need choose different font-family looks like FA comes only in uppercase form.
For the second i don't see any problems with the dark theme
I don't see an issue with the dark theme, either. Looks rather nice to me
Also, you really have to stop putting
width: 100% or width: 100vw on block elements. They're already 100% width :pIn codepen the properties color are changing in dark theme but when i try to change in code editor its not changing
Ok
That might be a caching issue on your local machine. Do a hard refresh of the page and see if that helps
Yes, the issue is resolved
👍
Okay
Hello! I'm facing an issue with the js code I'm trying to create a notes app using html css and js but there is an issue i have added two icons for toggling the code was working perfectly 3 hours ago one icon is hiding and one is showing on toggle
but now both of these are showing on toggling i tried todo some changes but not working when i have pasted the same code in the code pen their the code is working correctly i hard refresh the page check for cache check for the js whether is updating on page loads or not but still the issue persists and push the code to github there is also the same issue .
Yesterday i have this same issue i was trying to make changes to the code but changes were not showing on the ui i have previously i have installed live scss compilation extension i think it automatically updates the scss code to css when i click on that the issue was resolved but now no matter how i click on that its not resolving bcoz i think its automatically compiling. I can't figure out what's the issue . can you please check the code!
Codepen link:
https://codepen.io/Myra-Gull/pen/XJWyLXa
Github repo:
https://github.com/Myragull/Notes-App
Live at:
https://myragull.github.io/Notes-App/
GitHub
GitHub - Myragull/Notes-App
Contribute to Myragull/Notes-App development by creating an account on GitHub.
Which buttons are you referring to?
The theme toggle appears to be working correctly and I can't see any other event handlers in the code
I have applied the event listener to both the moon and sun icons and both are showing on the ui instead of one i want them to be seen one at a time
What I Have Tried:
Checked for caching issues (hard refreshed the page, cleared cache).
Verified JS updates on page reload.
Tested on CodePen—it works correctly there.
Pushed to GitHub—the issue still persists in the live version
ah, OK, I see now.
It is not the cache, it is the CSS cascade.
Your "hidden" class is being defined before the various .fa classes so they (the .fa classes) are overriding the .hidden class.
If you can, adjust your index.html to load the font-awesome CSS before your main CSS file
This works in Codepen as Codepen actually injects the CSS code that you into the head within
<style>tags and these are defined after any external CSS files that you may choose to add.Okay the issue is resolved and thanks so much i was wondering from the last few hours to figure out what exactly is the issue and it is this simple