Posts

JavaScript and a Matrix

Image
Screenshot of the code a 10 by 10 matrix Update 5/11/2021 I have successfully used the matrix to create a Snake game in Angular. See the live (Desktop only) game here: Firebase Deploy of Angular S N A K E Update 3/23/2021: I have changed the live version of the game to dynamically create the map for the minesweeper and this allowed for many open windows as to how I can upgrade and add onto the game. The easy version of the game allows people to learn and see how to form a strategy to defeat the original version of the game. There are sounds and options for game type and game size. Click on the options to turn the sound off if loud noises startle you as losing the games results in an explosion noise. Below is the link to the game, hosted on GitHub, and a GitHub link if you'd like to fork the code. Live Game: http...
Post a Comment
Read more

Creating a Carousel with JS, HTML, CSS Part 2

Image
JavaScript Experiment: Carousel images Part 2 The Set-up: Part 1 Lets make some changes.  How it looks after the initial set-up: DESIGN: There are a few design changes I'd like to make before I put in the images, and I'll do that now.  The main reason is I want the left and right image containers to be skewed and smaller than the main image. When the images change, it should feel like they are moving.  I'll add that styling now, so if there are any problems with how the images appear when they are assigned a new div, I'll know before going to deep in the code. I'm going to run the HTML file in the browser, and inspect it with the web dev tools. There I can click on an element and change its properties and see the results in live time.  This is part of why setting up that CSS file is helpful.   The web dev tools will pick up the related CSS class's and ID's and I can manipulate them directly.  Once I have it looking how I want, I can copy and paste what...
Post a Comment
Read more

Creating a JavaScript HTML and CSS Image Carousel

JavaScript Experiment: Carousel images  Part 1 SET UP: The first thing I am going to do is set up my HTML file, and the CSS that will control the design.  In the head of the html I will include the meta information that will help describe the purpose, and content of the page. The viewport is important not only for mobile design, but accessibility.  We want users to be able to scale the page to at least 5 times it's initial size.  This way if they need to enlarge font and content to see it, they can.  In the body, we'll define the objects/tags we want to be able to manipulate in both the CSS and in the javascript. The easiest and fastest way to change items in the HTML with JavaScript is with the unique id applied to the item.  The DOM can find these, and apply the code to them without much hassle.  For items I will be manipulating in the JavaScript, I add an id, with a snake case.  JavaScript can get fussy about hash marks.  For classes, or C...
Post a Comment
Read more

Animation with JavaScript

An Animation Experiment JavaScript is still a bit new to me, and I have yet to dive into the <canvas>.  I wanted to explore animation on web pages with vanilla Javascript. This seemed like a great opportunity to experiment, and share it for others to use. If you haven't seen some of my older posts, I do have experience with python GUI libraries like tkinter and pygame, so I had some basic knowledge on my hands before playing with this code. If you'd rather just dive in with your web dev tools or fork the github repo and play, here are the links: webpage: https://nelliesnoodles.github.io/JS_Animation/ repo:  https://github.com/nelliesnoodles/JS_Animation Breakdown of the JavaScript When I write my javascript, I organize it the same way I would a python file. At the top most are the functions called and used by the functions below them. At the bottom of the file will be the functions that get everything moving. If a function doesn't require ...
Post a Comment
Read more

Setting up the Javascript Experiment part 3: the Search

Image
Where ya been Nellie? I had the code working and written up for this part of the blog for a bit now, but wanted it incorporated into the finished app so the readers can see it in action before looking over the code. Image: screenshot of Favorite Fonts Chingu prework project.  Much like google fonts catalog page, it will allow you to surf through, search through, and play with different fonts available through the google fonts API. The full github repo: https://github.com/nelliesnoodles/Favorite_Fonts_Chingu_V15_prework Try it out! https://nelliesnoodles.github.io/Favorite_Fonts_Chingu_V15_prework/ The reason: Once I had the search algorithms worked out, there wasn't a whole lot of modification that needed to be done to work it into the javascript file for my favorite fonts project.  And since I had played with it and worked it thoroughly in the Experiment, I could see where different elements of the project needed to be included and modified to make the sear...
Post a Comment
Read more

Setting up the JavaScript Experiment, Part 2

Image
What we did first: https://camelcasenoodles.blogspot.com/2019/12/setting-up-javascript-experiment.html What's Next: Now we need to start setting up a search algorithm.  The user will type into the Search input and look for a matching word/string.   For this part, we are only going to get it finding strings who's first letters match and giving us back a list of those matches in the console with console.log. You can see what the log is doing if you go to your developer tools in the browser and opening up the tab for console.   Pictured below is what those steps are with Chrome.  On firefox they are very similar steps. Step 1:  find the tools Usually in the top right corner next to the address bar Step 2:  Open web development in the list,  In chrome, it is linked to the first menu's "more tools" list item.  Image: The open tools, with the drop menus for 'more tools' and 'development tools' selected. Step 3: Select t...
Post a Comment
Read more