diff --git a/Makefile b/Makefile index 7d9cdaf86..66b9806d5 100644 --- a/Makefile +++ b/Makefile @@ -1,6 +1,6 @@ # Configuration, override port with usage: make PORT=4200 PORT ?= 4100 -REPO_NAME ?= student_2025 +REPO_NAME ?= arshia_2025 LOG_FILE = /tmp/jekyll$(PORT).log SHELL = /bin/bash -c diff --git a/_config.yml b/_config.yml index 4f8d1eb3b..849635ecc 100644 --- a/_config.yml +++ b/_config.yml @@ -2,8 +2,8 @@ title: Nighthawk Pages description: "Class of 2025" owner_name: John Mortensen github_username: nighthawkcoders -github_repo: "student_2025" -baseurl: "/student_2025" +github_repo: "arshia_2025" +baseurl: "/arshia_2025" future: true remote_theme: jekyll/minima minima: @@ -16,7 +16,7 @@ minima: # remote_theme: pages-themes/cayman@v0.2.0 # remote_theme: pages-themes/dinky@v0.2.0 # remote_theme: pages-themes/minimal@v0.2.0 -# remote_theme: pages-themes/time-machine@v0.2.0 +remote_theme: pages-themes/time-machine@v0.2.0 plugins: - jekyll-remote-theme header_pages: diff --git a/_data/mario_metadata.yml b/_data/mario_metadata.yml new file mode 100644 index 000000000..53bc09674 --- /dev/null +++ b/_data/mario_metadata.yml @@ -0,0 +1,65 @@ +# Metadata to describe animations in sprite file images/mario_animations.png +- Rest: + row: 0 + col: 0 + frames: 15 +- RestL: + row: 1 + col: 0 + frames: 15 +- Walk: + row: 2 + col: 0 + frames: 8 +- Tada: + row: 2 + col: 11 + frames: 3 +- WalkL: + row: 3 + col: 0 + frames: 8 +- TadaL: + row: 3 + col: 11 + frames: 3 +- Run1: + row: 4 + col: 0 + frames: 15 +- Run1L: + row: 5 + col: 0 + frames: 15 +- Run2: + row: 6 + col: 0 + frames: 15 +- Run2L: + row: 7 + col: 0 + frames: 15 +- Puff: + row: 8 + col: 0 + frames: 15 +- PuffL: + row: 9 + col: 0 + frames: 15 +- Cheer: + row: 10 + col: 0 + frames: 15 +- CheerL: + row: 11 + col: 0 + frames: 15 +- Flip: + row: 12 + col: 0 + frames: 15 +- FlipL: + row: 13 + col: 0 + frames: 15 diff --git a/_includes/nav/home.html b/_includes/nav/home.html new file mode 100644 index 000000000..72f7eab06 --- /dev/null +++ b/_includes/nav/home.html @@ -0,0 +1,9 @@ + + + + + + + + +
HomeSnakeIdeasNotebooks
diff --git a/_notebooks/Foundation/2024-08-21-sprint1_plan.ipynb b/_notebooks/Foundation/2024-08-21-sprint1_plan.ipynb deleted file mode 100644 index 7ecbc1151..000000000 --- a/_notebooks/Foundation/2024-08-21-sprint1_plan.ipynb +++ /dev/null @@ -1,76 +0,0 @@ -{ - "cells": [ - { - "cell_type": "raw", - "metadata": { - "vscode": { - "languageId": "raw" - } - }, - "source": [ - "---\n", - "layout: post\n", - "title: Sprint 1 - Objectives \n", - "description: Tools and Software Development for Sprint 1\n", - "type: issues \n", - "comments: true\n", - "---" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## [Issue](https://github.com/nighthawkcoders/portfolio_2025/issues/14) " - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Project-base Learning Requirements\n", - "Each sprint there will be hacks and project-based learning requirements. It is up to the individual to develop their own plan for how they will represent work. Here are some links and tips.\n", - "\n", - "- All work, tangible artifacts, will be captured in personal GitHub Pages\n", - "- Tools and Software Development requirements are foundational requirements for all the CompSci courses. Thus, they are shared, but listed under [CSSE Projects](https://github.com/orgs/nighthawkcoders/projects/15)\n", - "- To obtain clarity on instructions you should start by picking a post in Sprint 1, then ask questions. \n", - "- In Agile Development methodology, which we will learn throughout the course, an iteration (plans, designs, review references, coding) and questions should all be considered as part of your work.\n", - "- Since iteraction and questions are part of your work, you should consider capturing and outlining iterations and questions in your blog.\n", - "- Be aware, you will get more \"Points\" if you \"Indicate\" that you are progressing on a CompSci journey. \n", - "- There are very few \"Correct Answers\" in this class! As you code, you will see that there is always more bugs and features.\n" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [ - "## Classroom Guidelines\n", - "**It will be a very bad day when you say... \"I have everything done\".** This statement typically comes by students that are lacking understading.\n", - "\n", - "This statement shows that the person making the statement knows very little about CompSci and the principles of iteration that are being promoted in this class. In fact, that state does not agree with Agile Development Methodologies that we will be learning in this class.\n", - "\n", - "The Teacher likes behaviors that are easily viewed and interpreted as productive to CompSci learning. \n", - "\n", - "- Code, Code, Code. This is the process of making code and involves making plans, designs, reviewing references, asking questions and Code-Code-Coding. \n", - "- No paper. We will be learning to do all work electronically. \n", - "- Work Talk. A very high percentate 75%, 80% or more of your talk during class should be code, code, code talk.\n", - "- Ears that can listen. 100% of time you should be available for discussion. Covered or plugged in ears restricts hearing.\n", - "- Hands that can code. The primary coding device is assumed to be your laptop! Sprint 1 will be focused on laptop importance.\n", - "\n", - "[Read Learning Habits Table](https://github.com/nighthawkcoders/portfolio_2025/issues/14) to understand how behaviors will impact grading.\n" - ] - }, - { - "cell_type": "markdown", - "metadata": {}, - "source": [] - } - ], - "metadata": { - "language_info": { - "name": "python" - } - }, - "nbformat": 4, - "nbformat_minor": 2 -} diff --git a/_notebooks/Sprint1/2024-09-15-javascript_output_objects.ipynb b/_notebooks/Sprint1/2024-09-15-javascript_output_objects.ipynb new file mode 100644 index 000000000..54ab5c88f --- /dev/null +++ b/_notebooks/Sprint1/2024-09-15-javascript_output_objects.ipynb @@ -0,0 +1,739 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "raw", + "metadata": { + "vscode": { + "languageId": "raw" + } + }, + "source": [ + "---\n", + "layout: post\n", + "title: JS Output w/ Objects\n", + "description: Quick launch into Variables, Functions, Arrays, Classes, Objects.\n", + "categories: [JavaScript]\n", + "---" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## JavaScript and Jupyter references\n", + "> JavaScript is the most important language you need to learn as a frontend developer. Jupyter Notebooks is a convenient way to learn portions of the language without the overhead of creating a full Website. \n", + "\n", + "- JavaScript / Jupyter General References\n", + " - [W3Schools HTML Reference](https://www.w3schools.com/html/default.asp)\n", + " - [W3Schools JS Reference](https://www.w3schools.com/js/)\n", + " - Theme setup for Jupyter [Article](https://linuxhint.com/change-theme-jupyter-notebook/). Or do these commands from shell...\n", + " - Install pip: pip install jupyterthemes\n", + " - Revert to original theme: jt -r \n", + " - List themes: jt -l\n", + " - Install with Theme, Name, Logo: jt -t onedork -T -N -kl" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Output using HTML and CSS\n", + "Multiple cells are used to setup HTML in this lesson. Many of the JavaScript cells will use the data and output tag(s) to write into the HTML DOM that has been setup.\n", + "\n", + "Output to HTML is the way to interact with the user. \n", + "\n", + "This is a \"classic\" html definition.\n", + "- **%%html**: This magic command is used in Jupyter Notebooks to write and run HTML code directly within a cell.\n", + "- **style** tag is used to define CSS styles for the HTML elements, allowing you to customize the appearance.\n", + "- **p** tag with **id** attribute uniquely identifies the element, making it easy to access and manipulate data with JavaScript.\n", + "- **div** tag with **class** attribute is a container for other HTML elements. The class attribute allows you to apply CSS styles to HTML elements within the div container." + ] + }, + { + "cell_type": "code", + "execution_count": 4, + "metadata": { + "vscode": { + "languageId": "html" + } + }, + "outputs": [ + { + "data": { + "text/html": [ + "\n", + "\n", + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "
\n", + " Hello!\n", + "
\n", + " \n", + "\n" + ], + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "%%html \n", + "\n", + "\n", + "\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + "
\n", + " Hello!\n", + "
\n", + " \n", + "" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Color Code\n", + "They are represented in Hexadecimal which is a shorthand for binary.\n", + "\n", + "### Break down\n", + "Here is a brief.\n", + "\n", + "| Intensity | Red Binary Digits | Red Hex | Blue Hex | Green Hex |\n", + "|-----------|-------------------|---------|----------|-----------|\n", + "| No Red | 0000 0000 | #00 | #00 | #00 |\n", + "| Weak Red | 0000 1111 | #0F | #00 | #00 |\n", + "| Strong Red| 1111 0000 | #F0 | #00 | #00 |\n", + "| Max Red | 1111 1111 | #FF | #00 | #00 |\n", + "\n", + "### Alter Color Combination\n", + "Pick your own color and background-color in the HTML." + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Hidden Data\n", + "Data can be on the page, but not visible. This is a common technique in HTML/JavaScript programming.\n", + "\n", + "Alter the Hidden Data to your own message." + ] + }, + { + "cell_type": "code", + "execution_count": 5, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [ + { + "data": { + "application/javascript": "\n// Extrat the hidden data from the page \nvar dataElement = document.getElementById('data');\nif (dataElement) {\n // Display the data in the console\n console.log(dataElement.innerText);\n} else {\n console.error('Element with id \"data\" not found.');\n}\n", + "text/plain": [ + "" + ] + }, + "metadata": {}, + "output_type": "display_data" + } + ], + "source": [ + "%%js\n", + "\n", + "// Extrat the hidden data from the page \n", + "var dataElement = document.getElementById('data');\n", + "if (dataElement) {\n", + " // Display the data in the console\n", + " console.log(dataElement.innerText);\n", + "} else {\n", + " console.error('Element with id \"data\" not found.');\n", + "}" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Other outputs explored\n", + "There are several ways to ouput the classic introduction message: \"Hello, World!\" \n", + "\n", + "These \"other outputs\" are for developers. \n", + "\n", + "- Before you go further, open Console on your Browser. JavaScript developer leaves Console open all the time!!!\n", + "- The function console.log() outputs to Console, this is often used for inspection or debugging.\n", + "- \"Hello, World\" is a String literal. This is the referred to as Static text, as it does not change. Developer call this a hard coded string.\n", + "- \"Hello, World\" literal is a parameter to console.log(), element.txt() and alert().\n", + "- The element.textContent is part of Jupyter Notebook %%js magic. This is convenient for Notebook and testing.\n", + "- The alert command outputs the parameter to a dialog box, so you can see it in this Jupyter notebook. The alert commands are shown, but are commented out as the stop run all execution of the notebook.\n", + "- Note, in a Web Application Debugging: An alert is often used for less savy Developers. Console is used by more savy developers; console often requires setting up a lot of outputs. Source level debugging is the most powerful solution for debugging and does not require alert or console commands." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js // required to allow cell to be JavaScript enabled\n", + "\n", + "console.log(\"JavaScript/Jupyter Output Intro\");\n", + "\n", + "// Browser Console output; debugging or tracing\n", + "console.log(\"Hello, World!\");\n", + "\n", + "// HTML page output using DOM (Document Object Model) from previous cell\n", + "document.getElementById(\"output\").textContent = \"Hello, World!\";\n", + "\n", + "// Jupyter Only, output for development\n", + "element.append(\"Hello, World!\"); // element is an output option as part of %%js magic\n", + "\n", + "// alert(\"Hello, World!\");" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### multiple outputs using a variable\n", + "This second example is a new sequence of code, two or more lines of code forms a sequence. This example defines a variable, thank goodness!!! In the previous example we were typing the string `\"Hello, World\" over and over`. Observe with the variable `msg=\"Hello, World!\";` we type the string once and now use `msg` over and over.\n", + "- The variable \"var msg =\" is used to capture the data\n", + "- The console.log(msg) outputs to console, be sure to Inspect it!\n", + "- The element.text() is part of Jupyter Notebooks and displays as output blow the code on this page. Until we build up some more interesting data for Web Site, we will not use be using the Python HTML, CSS technique.\n", + "- The alert(msg) works the same as previous, but as the other commands uses msg as parameter." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "console.log(\"Variable Definition\");\n", + "\n", + "var msg = \"Hello, World Again!\";\n", + "\n", + "// Use msg to output code to Console and Jupyter Notebook\n", + "console.log(msg); //right click browser select Inspect, then select Console to view\n", + "document.getElementById(\"output\").textContent = msg;\n", + "element.append(msg);\n", + "//alert(msg);" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### output showing use of a function\n", + "This example passes the defined variable \"msg\" to the newly defined \"function logIt(output)\".\n", + "- There are multiple steps in this code..\n", + " - The definition of the function: \"function logIt(output) {}\" and everything between curly braces is the definitions of the function. Passing a parameter is required when you call this function.\n", + " - The \"call to the function:\"logIt(msg)\" is the call to the function, this actually runs the function. The variable \"msg\" is used a parameter when calling the logIt function.\n", + "- Showing reuse of function...\n", + " - There are two calls to the logIt function\n", + " - This is called Prodedural Abstraction, a term that means reusing the same code" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "\n", + "console.log(\"Function Definition\");\n", + "\n", + "/* Function: logIt\n", + " * Parameter: msg\n", + " * Description: The parameter is \"msg\" is output to console, jupyter and \"output\" element in HTML\n", + "*/\n", + "function logIt(msg) {\n", + " console.log(msg); \n", + " element.append(msg);\n", + " document.getElementById(\"output\").textContent = msg;\n", + " //alert(output);\n", + "}\n", + "\n", + "// sequence of code build logIt parameter using concatenation\n", + "var msg = \"Hello, Students!\" // replaces content of variable\n", + "var classOf = \"Welcome CS class of 2024-2025.\"\n", + "logIt(msg + \" \" + classOf); // concatenation of strings" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### output showing Loosely typed data\n", + "JavaScript is a loosely typed language, meaning you don't have to specify what type of information will be stored in a variable in advance. \n", + "- To define a variable you prefix the name with var or const. The variable type is determined by JavaScript at runtime.\n", + "- Python and many interpretive languages are loosely typed like JavaScript. This is considered programmer friendly. \n", + "- Java which is a compiled language is strongly typed, thus you will see terms like String, Integer, Double, and Object in the source code. \n", + "- In JavaScript, the typeof keyword returns the type of the variable. Become familiar with type as it is valuable in conversation and knowing type help you understand how to modify data. Each variable type will have built in methods to manage content within the data type." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "console.log(\"Examine Data Types\");\n", + "\n", + "// Function to add typeof to output\n", + "function getType(output) {\n", + " return typeof output + \": \" + output;\n", + "}\n", + "\n", + "// Function defintion\n", + "function logIt(msg) {\n", + " console.log(getType(msg)); // logs string\n", + " console.info(msg); // logs object\n", + " document.getElementById(\"output\").textContent = msg;\n", + " element.append(getType(msg) + \" \"); // adds to Jupyter output\n", + " //alert(getType(msg));\n", + "}\n", + "\n", + "// Common Types\n", + "element.append(\"Common Types \");\n", + "logIt(\"Mr M\"); // String\n", + "logIt(1997); // Number\n", + "logIt(true); // Boolean\n", + "\n", + "// Object Type, this definition is often called a array or list\n", + "element.append(\"Object Type, array \");\n", + "var scores = [\n", + " 90,\n", + " 80, \n", + " 100\n", + "]; \n", + "logIt(scores);\n", + "\n", + "// Complex Object, this definition is often called hash, map, hashmap, or dictionary\n", + "element.append(\"Object Type, hash or dictionary \");\n", + "var person = { // key:value pairs seperated by comma\n", + " \"name\": \"Mr M\", \n", + " \"role\": \"Teacher\"\n", + "}; \n", + "logIt(person);\n", + "logIt(JSON.stringify(person)); //method used to convert this object into readable format" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Build a Person object, JSON, and show output\n", + "JavaScript and other languages have special properties and syntax to store and represent data. In fact, a class in JavaScript is a special function.\n", + "\n", + "- Definition of class allows for a collection of data, the \"class Person\" allows programmer to retain name, github id, and class of a Person.\n", + "- Instance of a class, the \"const teacher = new Person(\"Mr M\", \"jm1021\", 1977)\" makes an object \"teacher\" which is an object representation of \"class Person\".\n", + "- Setting and Getting properties After creating teacher and student objects, observe that properties can be changed/muted or extracted/accessed." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "console.log(\"Person objects\");\n", + "\n", + "/* class: Person\n", + " * Description: A collection of Person data\n", + "*/\n", + "class Person {\n", + " /* method: constructor\n", + " * parameters: name, ghID - GitHub ID, classOf - Graduation Class \n", + " * description: returns object when \"new Person()\" is called with matching parameters\n", + " * assignment: this.name, this.ghID, ... are properties retained in the returned object\n", + " * default: role uses a default property, it is set to \"Student\"\n", + " */\n", + " constructor(name, ghID, classOf, role=\"Student\") {\n", + " this.name = name;\n", + " this.ghID = ghID;\n", + " this.classOf = classOf;\n", + " this.role = role;\n", + " }\n", + "\n", + " /* method: setter\n", + " * parameters: role - role in classroom\n", + " * description: this.role is updated from default value to value contained in role parameter\n", + " */\n", + " setRole(role) {\n", + " this.role = role;\n", + " }\n", + " \n", + " /* method: getter\n", + " * description: turns properties of object into JSON object\n", + " * return value: JSON object\n", + " */\n", + " getJSON() {\n", + " const obj = {name: this.name, ghID: this.ghID, classOf: this.classOf, role: this.role};\n", + " const json = JSON.stringify(obj);\n", + " return json;\n", + " }\n", + "\n", + " /* method: logIT\n", + " * description: this Person object is logged to console\n", + " */\n", + " \n", + " logIt() {\n", + " //Person Object\n", + " console.info(this);\n", + " \n", + " // HTML output\n", + " document.getElementById(\"output\").textContent = this.getJSON();\n", + "\n", + " //Log to Jupter\n", + " element.append(this.role + \" object in JSON: \");\n", + " element.append(this.getJSON()); \n", + " element.append(\" \");\n", + "\n", + "\n", + " //alert(this.getJSON());\n", + " }\n", + " \n", + "}\n", + "\n", + "// make a new Person Object\n", + "const teacher = new Person(\"Mr M\", \"jm1021\", 1977); // object type is easy to work with in JavaScript\n", + "// update role to Teacher\n", + "var role = \"Teacher\";\n", + "teacher.setRole(role); // set the role\n", + "teacher.logIt(); // log to console\n", + "\n", + "// make a new Person Object\n", + "const student = new Person(\"Jane Doe\", \"jane\", 2007); // object type is easy to work with in JavaScript\n", + "student.logIt(); // log to console" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Build a Classroom Array/List of Persons, JSON, and show output\n", + "Many key elements are shown again. New elements include...\n", + "- Building an Array, \"const students\" is an array of many students. \n", + "- Building a Classroom, this shows combining using spread." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "console.log(\"Classroom object\");\n", + "\n", + "/* class: Person\n", + " * Description: A collection of Person data\n", + "*/\n", + "class Person {\n", + " /* method: constructor\n", + " * parameters: name, ghID - GitHub ID, classOf - Graduation Class \n", + " * description: returns object when \"new Person()\" is called with matching parameters\n", + " * assignment: this.name, this.ghID, ... are properties retained in the returned object\n", + " * default: this.role is a default property retained in object, it is set to \"Student\"\n", + " */\n", + " constructor(name, ghID, classOf, role=\"Student\") {\n", + " this.name = name;\n", + " this.ghID = ghID;\n", + " this.classOf = classOf;\n", + " this.role = role;\n", + " }\n", + "\n", + " /* method: setter\n", + " * parameters: role - role in classroom\n", + " * description: this.role is updated from default value to value contained in role parameter\n", + " */\n", + " setRole(role) {\n", + " this.role = role;\n", + " }\n", + " \n", + " /* method: getter\n", + " * description: turns properties of object into JSON object\n", + " * return value: JSON object\n", + " */\n", + " getJSON() {\n", + " const obj = {name: this.name, ghID: this.ghID, classOf: this.classOf, role: this.role};\n", + " const json = JSON.stringify(obj);\n", + " return json;\n", + " }\n", + "\n", + " /* method: logIT\n", + " * description: this Person object is logged to console\n", + " */\n", + " logIt() {\n", + " //Person Object\n", + " console.info(this);\n", + " // HTML output tag\n", + " document.getElementById(\"output\").textContent = this.getJSON();\n", + "\n", + " //Log to Jupter\n", + " element.append(\"Person json
\");\n", + " element.append(this.getJSON() + \"
\"); \n", + "\n", + " //alert(this.getJSON());\n", + " }\n", + " \n", + "}\n", + "\n", + "/* class: Classroom\n", + " * Description: A collection of Person objects\n", + "*/\n", + "class Classroom {\n", + " /* method: constructor\n", + " * parameters: teacher - a Person object, students - an array of Person objects\n", + " * description: returns object when \"new Classroom()\" is called containing properties and methods of a Classroom\n", + " * assignment: this.classroom, this.teacher, ... are properties retained in the returned object\n", + " */\n", + " constructor(teacher, students) {\n", + " /* spread: this.classroom contains Teacher object and all Student objects\n", + " * map: this.json contains of map of all persons to JSON\n", + " */\n", + " this.teacher = teacher;\n", + " this.students = students;\n", + " this.classroom = [teacher, ...students]; // ... spread option\n", + " this.json = '{\"classroom\":[' + this.classroom.map(person => person.getJSON()) + ']}';\n", + " }\n", + "\n", + " /* method: logIT\n", + " * description: this Classroom object is logged to console\n", + " */\n", + " logIt() {\n", + " //Classroom object\n", + " console.log(this);\n", + "\n", + " // HTML output\n", + " document.getElementById(\"data\").textContent = this.json;\n", + " document.getElementById(\"output\").textContent = this.json;\n", + "\n", + " //Classroom json\n", + " element.append(\"Classroom object in JSON: \");\n", + " element.append(this.json);\n", + "\n", + " //alert(this.json);\n", + " }\n", + "}\n", + "\n", + "/* function: constructCompSciClassroom\n", + " * Description: Create data for Classroom and Person objects\n", + " * Returns: A Classroom Object\n", + "*/\n", + "function constructCompSciClassroom() {\n", + " // define a Teacher object\n", + " const teacher = new Person(\"Mr M\", \"jm1021\", 1977, \"Teacher\"); // optional 4th parameter\n", + "\n", + " // define a student Array of Person objects\n", + " const students = [ \n", + " new Person(\"Anthony\", \"tonyhieu\", 2022),\n", + " new Person(\"Bria\", \"B-G101\", 2023),\n", + " new Person(\"Allie\", \"xiaoa0\", 2023),\n", + " new Person(\"Tigran\", \"Tigran7\", 2023),\n", + " new Person(\"Rebecca\", \"Rebecca-123\", 2023),\n", + " new Person(\"Vidhi\", \"VidhiKulkarni\", 2024)\n", + " ];\n", + "\n", + " // make a CompSci classroom from formerly defined teacher and student objects\n", + " return new Classroom(teacher, students); // returns object\n", + "}\n", + "\n", + "// assigns compsci to the object returned by \"constructCompSciClassroom()\" function\n", + "const compsci = constructCompSciClassroom();\n", + "// output of Objects and JSON in CompSci classroom\n", + "compsci.logIt();\n" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### for loop to generate Table Rows in HTML output\n", + "This code extracts JSON text from HTML, that was placed in DOM in a previous JavaScript cell, then it parses text into a JavaScript object. In addition, there is a for loop that iterates over the extracted object generating formated rows and columns in an HTML table.\n", + "\n", + "- Table generation is broken into parts...\n", + " - table data is obtained from a classroom array inside of the extracted object. \n", + " - the JavaScript for loop allows the construction of a new row of data for each Person hash object inside of the the Array.\n", + " - in the loop a table row ` ... ` is created for each Hash object in the Array.\n", + " - in the loop table data, a table column, ` ... ` is created for name, ghID, classOf, and role within the Hash object.\n", + " \n", + "```\n", + " ----------------\n", + " | HTML |\n", + " | DOM | \n", + " | data output | - ref: id=\"data\", id=\"output\"\n", + " ----------------\n", + " ⇓ ⇑\n", + " get set\n", + " ----------------\n", + " | JavaScript | - get data: \n", + " | code | const jsonText = document.getElementById(\"data\").innerHTML;\n", + " |getElementById| - set output: \n", + " ---------------- document.getElementById(\"output\").innerHTML = htmlOut;\n", + "\n", + "```" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": { + "vscode": { + "languageId": "javascript" + } + }, + "outputs": [], + "source": [ + "%%js\n", + "console.log(\"Classroom Web Page\");\n", + "\n", + "// extract JSON text from output element in HTML page\n", + "const jsonText = document.getElementById(\"data\").innerHTML;\n", + "console.log(jsonText);\n", + "\n", + "// convert JSON text to a JavaScript Object to process\n", + "const classroom = JSON.parse(jsonText).classroom;\n", + "console.log(classroom);\n", + "\n", + "// make an HTML Out format for pretty display\n", + "/* Template literals (`), can make HTML generation more concise;\n", + " * the map functions generates row strings and the join method combines them;\n", + " * this replaces longer and ugly for loop and string concatenation.\n", + "*/\n", + "const htmlOut = `\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " ${classroom.map(row => `\n", + " \n", + " \n", + " \n", + " \n", + " \n", + " \n", + " `).join('')}\n", + " \n", + "
NameGitHub IDClass OfRole
${row.name}${row.ghID}${row.classOf}${row.role}
\n", + "`;\n", + "\n", + "// assign/set htmlOut to output element in HTML page\n", + "document.getElementById(\"output\").innerHTML = htmlOut;\n", + "\n", + "// show raw HTML\n", + "console.log(htmlOut);\n", + "element.append(htmlOut);" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Hacks\n", + "> Work with output and objects.\n", + "- Explain each of the outputs types.\n", + "- Using the last two code cells. Make a table of Cars, Games, Team Member. Something that you and pair share as interests." + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.10.12" + } + }, + "nbformat": 4, + "nbformat_minor": 4 +} diff --git a/_notebooks/Sprint1/2024-09-15-jupyter-notebook-python.ipynb b/_notebooks/Sprint1/2024-09-15-jupyter-notebook-python.ipynb new file mode 100644 index 000000000..7a368b5c6 --- /dev/null +++ b/_notebooks/Sprint1/2024-09-15-jupyter-notebook-python.ipynb @@ -0,0 +1,288 @@ +{ + "cells": [ + { + "attachments": {}, + "cell_type": "raw", + "metadata": { + "vscode": { + "languageId": "raw" + } + }, + "source": [ + "---\n", + "layout: post\n", + "title: Playing with Jupyter Notebooks and Python\n", + "description: GitHub pages was built with Python and Jupyter Notebooks in mind. This post is to verify tools by using Python. \n", + "categories: [Python]\n", + "permalink: /jupyter/notebook/python\n", + "menu: nav/tools_setup.html\n", + "toc: true\n", + "comments: true\n", + "---" + ] + }, + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Python and Jupyter Notebooks\n", + "Python is a highly versatile and widely-used programming language, renowned for its readability and broad library support. \n", + "\n", + "Jupyter Notebooks is an interactive computing environment that enables users to create and share documents containing live code, equations, visualizations, and narrative text. \n", + "\n", + "Together, Python and Jupyter Notebooks, form a powerful toolkit for data analysis, scientific research, and educational purposes.\n", + "\n", + "We will play with Python and Jupyter Notebooks to get a feel for both. This is a great interactive way to start development." + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Emoji Print\n", + "It is easy to add an emoji to a message in code. However, using the emoji library or other libraries often requires you to install code on your machine. Before using a library, that is not part of Python distribution, you must install with `pip`\n", + "\n", + "```bash\n", + "# terminal command to install library\n", + "$ pip install emoji\n", + "Collecting emoji\n", + " Downloading emoji-2.5.1.tar.gz (356 kB)\n", + "...\n", + "Successfully installed emoji-2.5.1\n", + "```" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "#!pip install emoji\n", + "from emoji import emojize \n", + "print(emojize(\":thumbs_up: Python is awesome! :grinning_face:\"))" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Extracting Data \n", + "Web sites become a lot more interesting when you are working with data, not trying to create it. Here is some code using a library called newspaper, this extracts a couple of writeups from the CNN Entertainment site.\n", + "- Learn more on [newspaper3k](https://newspaper.readthedocs.io/en/latest/)\n", + "- Learn about library for [wikipedia](https://pypi.org/project/wikipedia/)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "#!pip install newspaper3k lxml_html_clean\n", + "from newspaper import Article\n", + "from IPython.display import display, Markdown\n", + "\n", + "\n", + "urls = [\"http://cnn.com/2023/03/29/entertainment/the-mandalorian-episode-5-recap/index.html\", \n", + " \"https://www.cnn.com/2023/06/09/entertainment/jurassic-park-anniversary/index.html\"]\n", + "\n", + "for url in urls:\n", + " article = Article(url)\n", + " article.download()\n", + " article.parse()\n", + " # print(article.title)\n", + " # Jupyter Notebook Display\n", + " display(Markdown(article.title)) # Jupyter display only\n", + " display(Markdown(article.text)) # Jupyter display only\n", + " print(\"\\n\")\n" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "#!pip install wikipedia\n", + "import wikipedia \n", + "from IPython.display import display, Markdown # add for Jupyter\n", + "\n", + "terms = [\"Python (programming language)\", \"JavaScript\"]\n", + "for term in terms:\n", + " # Search for a page \n", + " result = wikipedia.search(term)\n", + " # Get the summary of the first result\n", + " summary = wikipedia.summary(result[0])\n", + " print(term) \n", + " # print(summary) # console display\n", + " display(Markdown(summary)) # Jupyter display" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Inspecting a Function\n", + "The inspect module can give you the output of what's inside many Python functions/objects. This can help you explore code behind what you are using.\n", + "- [Inspect](https://docs.python.org/3/library/inspect.html) documentation." + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "import inspect \n", + "from newspaper import Article\n", + "\n", + "# inspect newspaper Article function\n", + "print(inspect.getsource(Article))" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "### Python Data Types\n", + "Dynamic typing means that the type of the variable is determined only during runtime. Strong typing means that variables do have a type and that the type matters when performing operations. In the illustration below there are two functions\n", + "- mean... shows types required prior to calling average function\n", + "- average, average2... calculates the average of a list of numbers\n", + "\n", + "\n", + "Python has types. In the language you can use type hints, but most coders do not use them. In other languages like Java and 'C' you must specify types.\n", + "- [Python Types Cheat Sheet](https://mypy.readthedocs.io/en/stable/cheat_sheet_py3.html)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "import sys\n", + "from typing import Union\n", + "\n", + "# Define types for mean function, trying to analyze input possibilities\n", + "Number = Union[int, float] # Number can be either int or float type\n", + "Numbers = list[Number] # Numbers is a list of Number types\n", + "Scores = Union[Number, Numbers] # Scores can be single or multiple \n", + "\n", + "def mean(scores: Scores, method: int = 1) -> float:\n", + " \"\"\"\n", + " Calculate the mean of a list of scores.\n", + " \n", + " Average and Average2 are hidden functions performing mean algorithm\n", + "\n", + " If a single score is provided in scores, it is returned as the mean.\n", + " If a list of scores is provided, the average is calculated and returned.\n", + " \"\"\"\n", + " \n", + " def average(scores): \n", + " \"\"\"Calculate the average of a list of scores using a Python for loop with rounding.\"\"\"\n", + " sum = 0\n", + " len = 0\n", + " for score in scores:\n", + " if isinstance(score, Number):\n", + " sum += score\n", + " len += 1\n", + " else:\n", + " print(\"Bad data: \" + str(score) + \" in \" + str(scores))\n", + " sys.exit()\n", + " return sum / len\n", + " \n", + " def average2(scores):\n", + " \"\"\"Calculate the average of a list of scores using the built-in sum() function with rounding.\"\"\"\n", + " return sum(scores) / len(scores)\n", + "\n", + " # test to see if scores is a list of numbers\n", + " if isinstance(scores, list):\n", + " if method == 1: \n", + " # long method\n", + " result = average(scores)\n", + " else:\n", + " # built in method\n", + " result = average2(scores)\n", + " return round(result + 0.005, 2)\n", + " \n", + " return scores # case where scores is a single valu\n", + "\n", + "# try with one number\n", + "singleScore = 100\n", + "print(\"Print test data: \" + str(singleScore)) # concat data for single line\n", + "print(\"Mean of single number: \" + str(mean(singleScore)))\n", + "\n", + "print()\n", + "\n", + "# define a list of numbers\n", + "testScores = [90.5, 100, 85.4, 88]\n", + "print(\"Print test data: \" + str(testScores))\n", + "print(\"Average score, loop method: \" + str(mean(testScores)))\n", + "print(\"Average score, function method: \" + str(mean(testScores, 2)))\n", + "\n", + "print()\n", + "\n", + "badData = [100, \"NaN\", 90]\n", + "print(\"Print test data: \" + str(badData))\n", + "print(\"Mean with bad data: \" + str(mean(badData)))\n", + "\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [ + "## Hacks\n", + "Here is a summary of some of the things learned above.\n", + "- Formatting messages with emoji\n", + "- Exploring data with newspaper and wikipedia libraries\n", + "- Finding code on how the library we used was made\n", + "- Learning about data types while writing an algorithm for mean\n", + "\n", + "> Part of Project Based learning is the idea of combining concepts to form something more interesting. Make a plan, form some ideas, brainstorm ideas with pair. Produce something that is interesting and challenging. Samples...\n", + "- Could I get input from user to look up wikipedia information? [Python input](https://www.w3schools.com/python/ref_func_input.asp), [Article on Input](https://vegibit.com/python-input-function/)\n", + "- What could I learn in Python about Stats to get Machine Learning Read? [Stats Calculations](https://docs.python.org/3/library/statistics.html)\n", + "- Could I add emoji to an extracted article? [String Find](https://www.w3schools.com/python/ref_string_find.asp), [String Methods](https://www.w3schools.com/python/python_strings_methods.asp)\n", + "\n" + ] + }, + { + "attachments": {}, + "cell_type": "markdown", + "metadata": {}, + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3.8.10 64-bit", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.12.5" + }, + "vscode": { + "interpreter": { + "hash": "916dbcbb3f70747c44a77c7bcd40155683ae19c65e1c03b4aa3499c5328201f1" + } + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/_notebooks/Sprint1/2025-9-18-javascriptcell.ipynb b/_notebooks/Sprint1/2025-9-18-javascriptcell.ipynb new file mode 100644 index 000000000..e29e8dc02 --- /dev/null +++ b/_notebooks/Sprint1/2025-9-18-javascriptcell.ipynb @@ -0,0 +1,57 @@ +{ + "cells": [ + { + "cell_type": "raw", + "metadata": {}, + "source": [ + "---\n", + "layout: post\n", + "title: Notebooks Javascript Cell\n", + "description: Hack #2 Github Pages Playground \n", + "categories: [Sprint1]\n", + "permalink: /home/notebooks\n", + "menu: nav/home.hmtl\n", + "---" + ] + }, + { + "cell_type": "code", + "execution_count": 1, + "metadata": {}, + "outputs": [ + { + "name": "stdout", + "output_type": "stream", + "text": [ + "hello everyone\n" + ] + } + ], + "source": [ + "msg=\"hello everyone\"\n", + "print(msg)" + ] + } + ], + "metadata": { + "kernelspec": { + "display_name": "venv", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.10.12" + } + }, + "nbformat": 4, + "nbformat_minor": 2 +} diff --git a/_sass/minima/custom-styles.scss b/_sass/minima/custom-styles.scss index ac555a85b..983f1bee6 100644 --- a/_sass/minima/custom-styles.scss +++ b/_sass/minima/custom-styles.scss @@ -1,13 +1,13 @@ // Comment in or Uncomment out the following themes to use them // Dark themes -//@import "minima/leaf/_leaf"; //Leaf theme +@import "minima/leaf/_leaf"; //Leaf theme //@import "minima/hacker/jekyll-theme-hacker"; //Hacker theme //@import "minima/dracula/_dracula"; // Light themes -@import "minima/hamilton/main"; //Hamilton theme +//@import "minima/hamilton/main"; //Hamilton theme //@import "minima/monophase/main"; //Monophase theme //@import "minima/minimal-mistakes/__minimal-mistakes"; //Minimal Mistakes theme // Mix Light themes with this if your eyes are bleeding -@import "minima/dracula/dark-mode"; +//@import "minima/dracula/dark-mode"; diff --git a/data b/data new file mode 100644 index 000000000..53bc09674 --- /dev/null +++ b/data @@ -0,0 +1,65 @@ +# Metadata to describe animations in sprite file images/mario_animations.png +- Rest: + row: 0 + col: 0 + frames: 15 +- RestL: + row: 1 + col: 0 + frames: 15 +- Walk: + row: 2 + col: 0 + frames: 8 +- Tada: + row: 2 + col: 11 + frames: 3 +- WalkL: + row: 3 + col: 0 + frames: 8 +- TadaL: + row: 3 + col: 11 + frames: 3 +- Run1: + row: 4 + col: 0 + frames: 15 +- Run1L: + row: 5 + col: 0 + frames: 15 +- Run2: + row: 6 + col: 0 + frames: 15 +- Run2L: + row: 7 + col: 0 + frames: 15 +- Puff: + row: 8 + col: 0 + frames: 15 +- PuffL: + row: 9 + col: 0 + frames: 15 +- Cheer: + row: 10 + col: 0 + frames: 15 +- CheerL: + row: 11 + col: 0 + frames: 15 +- Flip: + row: 12 + col: 0 + frames: 15 +- FlipL: + row: 13 + col: 0 + frames: 15 diff --git a/images/about/arshiaart1.jpg b/images/about/arshiaart1.jpg new file mode 100644 index 000000000..16f52858b Binary files /dev/null and b/images/about/arshiaart1.jpg differ diff --git a/images/about/arshiaart2.jpg b/images/about/arshiaart2.jpg new file mode 100644 index 000000000..9902204fd Binary files /dev/null and b/images/about/arshiaart2.jpg differ diff --git a/images/about/arshiaart3.jpg b/images/about/arshiaart3.jpg new file mode 100644 index 000000000..3d553b052 Binary files /dev/null and b/images/about/arshiaart3.jpg differ diff --git a/images/about/arshiaart4.jpg b/images/about/arshiaart4.jpg new file mode 100644 index 000000000..5f7aca004 Binary files /dev/null and b/images/about/arshiaart4.jpg differ diff --git a/images/about/arshiaart5.jpg b/images/about/arshiaart5.jpg new file mode 100644 index 000000000..22f9aa113 Binary files /dev/null and b/images/about/arshiaart5.jpg differ diff --git a/images/about/indian_flag.jpg b/images/about/indian_flag.jpg new file mode 100644 index 000000000..2240401ad Binary files /dev/null and b/images/about/indian_flag.jpg differ diff --git a/index.md b/index.md index c5006b98c..b34d756d5 100644 --- a/index.md +++ b/index.md @@ -5,4 +5,16 @@ description: Home Page hide: true --- -My journey starts here. +My journey starts here arshia deb roy +{% include nav/home.html %} + +# My Journey + +
+

The button underneath represents my love of asmr. I enjoy asmr so much that me and my friends regularly do asmr together and we help each other relax through doing this.

+
+ + + + + diff --git a/navigation/about.md b/navigation/about.md index a8d98630a..8219865e4 100644 --- a/navigation/about.md +++ b/navigation/about.md @@ -1,7 +1,133 @@ --- layout: page -title: About +title: About Me +description: My name is Arshia Deb Roy. permalink: /about/ --- -Creator of Student 2025 + + +## Culture and Family + +
+ Why do you think this flag is significant to me? + India Flag +

Namaste.
India - Land Of Diversity

+ California Flag +

Hi.
California - The golden State

+
+ + + + +
+ +
+ + + +Even though I am born in California, my family comes from India. I am very connected to my cuture and I regularly visit India and I do indian classical singing. + + +# Art + +I am also really into art and I took AP studio art last year at Del Norte. Here is some of my art. + + +Gallery of Pics, scroll to the right for more ... + +
+ Image 1 + Image 2 + Image 3 + Image 4 + Image 5 +
+ +# Fun Facts + +I really love cats and I want a cat in the future. + +I love to go to the beach. + +I am trilingual and can speak english, hindi, and bengali. diff --git a/navigation/blog.md b/navigation/blog.md index 0ce56306d..7c52af6e9 100644 --- a/navigation/blog.md +++ b/navigation/blog.md @@ -4,3 +4,4 @@ title: Blogs search_exclude: true permalink: /blogs/ --- +[sprint 1]() \ No newline at end of file diff --git a/navigation/ideas.md b/navigation/ideas.md new file mode 100644 index 000000000..3daedcd16 --- /dev/null +++ b/navigation/ideas.md @@ -0,0 +1,10 @@ +--- +layout: page +title: Ideas +description: A blog for Ideas for CompSci, etc. +permalink: /ideas/ +--- + +{% include nav/home.html %} + +Future Ideas for the things that pop into my head diff --git a/navigation/snake.md b/navigation/snake.md new file mode 100644 index 000000000..a57b63cf6 --- /dev/null +++ b/navigation/snake.md @@ -0,0 +1,373 @@ +--- +layout: page +title: Snake +description: Snake game +permalink: /snake/ +--- + +{% include nav/home.html %} + + + + +
+
+

Snake score: 0

+
+
+ +
+

Welcome to Snake, press space to begin

+ new game + settings +
+ +
+

Game Over, press space to try again

+ new game + settings +
+ + + +
+

Settings Screen, press space to go back to playing

+ new game +
+

Speed: + + + + + + +

+

Wall: + + + + +

+
+
+
+ + \ No newline at end of file diff --git a/navigation/sprint 1 b/navigation/sprint 1 new file mode 100644 index 000000000..e69de29bb