a1-trumanlarson (Truman Larson)

README.md

@@ -1,77 +1,29 @@
 Assignment 1 - Hello World: Basic Deployment w/ Git, GitHub, Glitch
-===
 
-*DUE: Thursday, August 29th by 11:59 AM (before the start of class!)*  
+Truman Larson
+https://a1-trumanlarson.glitch.me
 
-This assignment is a "warm-up" exercise. 
-You will simply deploy the starting Web site that you will use this term to [Glitch](http://www.glitch.com/). 
+SUBMISSION NOTE: I originally submitted on the 2019 repo which is why this apears late on the 2020 repo. Sorry for the confusion!
 
-Treat this assignment as a chance to get up to speed on Git, GitHub, and Glitch. 
-If you already know these, great. 
-However, if you're new to them, spend several hours practicing, experimenting, and reading documentation. 
-In other words, don't just get your website up and done. You will need skills with these tools throughout the rest of the course.
-
-Assignment details
----
-
-Do the following to complete this assignment:
-
-1. Fork the starting project code in GitHub. This repo contains:
-    * the server code, `server.js`
-    * A starting `index.html` file that you will edit as described below
-    * A package.json file that helps configure Glitch
-    * This README
-2. Edit `index.html` to show the following information about you:
-    * your name and class at WPI (e.g. class of 2020) Note: Do not put any contact or personal information that you do not potentially want other people outside of this class to see.
-    * your major(s) and minor(s)
-    * previous computer science courses that you have taken at WPI
-    * your experience with the following technologies and methods (none, some, a lot)
-        * HTML
-        * CSS
-        * Java
-        * JavaScript
-        * Ruby
-        * Python
-        * unit testing
-3. Test your project to make sure that when someone goes to your main page, it displays correctly. You can do this locally by simply running `node server.js` from within the assignment directory.
-
-4. Modify the README file according to the specification below.
-5. Commit and push all your changes to GitHub. 
-6. Deploy your project to Glitch. You can do this by [importing the repo from GitHub](https://medium.com/glitch/import-code-from-anywhere-83fb60ea4875)
-7. Ensure that your project has the proper naming scheme (guide follows) so we can find it.
-8. Create and submit a Pull Request to the original repo.
-
-Naming and URL Scheme
----
-
-You must use a consistent naming scheme for all projects in this course.
-If we can't find it, we can't grade it.
-
-By default Glitch often assigns your application a random name. To change it, click on the project dropdown menu in the upper left corner of Glitch. You will then see an additional text field displaying the project name in the resulting menu; click here to edit the name.
-
-The name scheme should be `a1-yourGitHubUsername`.
-The `a1` will need to be updated to `a2`, `a3`, and so on in future projects.
-
-Resources
----
-
-If you need a JavaScript/HTML/CSS refresher, see [Technology Fundamentals by Scott Murray](http://chimera.labs.oreilly.com/books/1230000000345/ch03.html#_html) and/or [JavaScript Codeacademy](https://www.codecademy.com/en/tracks/javascript).
-
-If you need a Git/GitHub refreseher, see [GitHub Bootcamp](https://help.github.com/categories/bootcamp/), the [GitHub Guides](https://guides.github.com/) (especially the ones on Hello World, and Understanding the GitHub Flow, and Forking Projects), and [CodeSchool's Try Git Course](https://www.codeschool.com/courses/try-git).
-
-Sample Readme (delete the above when you're ready to submit, and modify the below so with your links and descriptions)
----
-
-Charlie Roberts
-http://a1-charlieroberts.glitch.me
-
-This project shows ...
+This project shows basic information on the life of me, Truman Larson.
 
 ## Technical Achievements
-- **Proved P=NP**: Using a combination of...
-- **Solved AI**: ...
+- **Utilized many different HTML tags**: 5 of these tags include
+    - the unordered list (ul) tag to list the classes i have taken. 
+    - the ordered list (ol) tag to list the order of comfort of the different concepts
+    - marquee tag to say hello to the user in a different and interesting way
+    - span tag to apply a style (in this case a text color) to a singular word in a paragraph
+    - "a" tag to give a convenient link to a very popular webside (for convienence)
+    - "div" tag to represent the circle in the javascript animation
+- **Animated an element using Javascript** I utilized the interval funtionality of javascript to animated a cirle bouncing back and forth. Additional functionality includes the ability to stop and start the circle's movement by clicking on the circle itself. You gotta be quick!
+- **Created a circle from a div element using style modifiers** I untilized 5 different style modifiers to create a circle.
+    - Width and height to specify how large the circle should be
+    - position absolute to be able to manipulate the pixel values of its position
+    - background to specify the color to be red so that it stands out from the rest of the page
+    - border-radius 50% to curve the edges of the shape to make the element appear as a circle
+
 
 ### Design Achievements
-- **Re-vamped Apple's Design Philosophy**: Shown in `style.css`, the code...
+- **Used the Roboto Font from Google Fonts**: I used Roboto as the font for the primary copy text in my site.
 
 

index.html

@@ -2,27 +2,110 @@
 <html lang="en">
   <head>
     <title>CS4241 Assignment 1</title>
+    <link rel="stylesheet"
+          href="https://fonts.googleapis.com/css?family=Roboto">
+    <style>
+      body {
+        font-family: 'Roboto', sans-serif;
+        font-size: 16px;
+      }
+    </style>
     <meta charset="utf-8">
   </head>
   <body>
-    <h1>Information about [Your name here]</h1>
+    <h1>Information about Truman Larson</h1>
     <p>
-      [Self introduction]
+      Hi I'm Truman Larson class of 2022! 
     </p>
     <p>
-      [Major and other information]
+      I am a Computer Science Major with an interest in Data Science.
     </p>
     <p>
-      [Other things]
+      Previous Computor Science Courses:
     </p>
+    <ul>
+      <li>CS1102 - Advanced Into to Computer Science</li>
+      <li>CS2103 - Advanced Intro to Object Oriented Programming</li>
+      <li>CS2303 - Systems Programming</li>
+      <li>CS2011 - Intro to Machine Org and Assembly</li>
+      <li>CS2022 - Discrete Math</li>
+      <li>CS2223 - Algorithms</li>
+      <li>CS3013 - Operating Systems</li>
+      <li>CS3133 - Foundations of Computer Science</li>
+      <li>CS3431 - Database Systems I</li>
+      <li>CS3733 - Software Engineering</li>
+    </ul>
+    <p>
+      Current Computer Science Courses:
+    </p>
+    <ul>
+        <li>CS4241 - Webware</li>
+        <li>CS3516 - Computer Networks</li>
+        <li>CS4341 - Intro to AI</li>
+    </ul>
 
     <h2>Experience</h2>
     <p>
       Working experience
     </p>
     <ul>
-      <li>IBM/Rational</li>
-      <li>WPI</li>
+      <li>Research and Development Intership at <span style="color:rgb(161, 91, 231);">SilverTech Inc.</span> in Manchester, New Hampshire; 2 summers</li>
     </ul>
+    <p>
+      Technological Experience
+    </p>
+    <ol>
+      <li>Java - Fairly experienced (8/10)</li>
+      <li>Python - Fairly experienced (8/10)</li>
+      <li>Unit Testing - Fairly experienced (7/10)</li>
+      <li>HTML - Some experience (5/10)</li>
+      <li>CSS - Some experience (5/10)</li>
+      <li>Javascript - Some experience (5/10)</li>
+      <li>Ruby - No experience (1/10)</li>
+    </ol>
+
+    <marquee> Hello there </marquee>
+
+    <a href="www.google.com">The google</a>
+
+    <div id="circle", 
+    style = "width: 50px;
+    height: 50px;
+    position: absolute;
+    background: red;
+    border-radius: 50%;"></div>
   </body>
+
+  <script>
+      let circle = document.getElementById("circle");
+      let id = setInterval(frame, 5);
+      let active = true;
+      let pos = 1;
+      let reverse = false;
+      function frame() {
+
+
+        if (reverse) pos--;
+        else pos++;
+
+        if (pos >= 150){
+          reverse = true;
+        }
+        if (pos <= 0){
+          reverse = false;
+        }
+
+        circle.style.left = pos + 'px';
+      }
+      circle.onclick = function(){
+        if (active){
+          clearInterval(id);
+          active = false;
+        }
+        else {
+          id = setInterval(frame, 5);
+          active = true;
+        }
+      }
+  </script>
 </html>