diff --git a/.gitignore b/.gitignore index 3e759b7..c667e8f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,330 +1,27 @@ -## Ignore Visual Studio temporary files, build results, and -## files generated by popular Visual Studio add-ons. -## -## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore - -# User-specific files -*.suo -*.user -*.userosscache -*.sln.docstates - -# User-specific files (MonoDevelop/Xamarin Studio) -*.userprefs - -# Build results -[Dd]ebug/ -[Dd]ebugPublic/ -[Rr]elease/ -[Rr]eleases/ -x64/ -x86/ -bld/ -[Bb]in/ -[Oo]bj/ -[Ll]og/ - -# Visual Studio 2015/2017 cache/options directory -.vs/ -# Uncomment if you have tasks that create the project's static files in wwwroot -#wwwroot/ - -# Visual Studio 2017 auto generated files -Generated\ Files/ - -# MSTest test Results -[Tt]est[Rr]esult*/ -[Bb]uild[Ll]og.* - -# NUNIT -*.VisualState.xml -TestResult.xml - -# Build Results of an ATL Project -[Dd]ebugPS/ -[Rr]eleasePS/ -dlldata.c - -# Benchmark Results -BenchmarkDotNet.Artifacts/ - -# .NET Core -project.lock.json -project.fragment.lock.json -artifacts/ -**/Properties/launchSettings.json - -# StyleCop -StyleCopReport.xml - -# Files built by Visual Studio -*_i.c -*_p.c -*_i.h -*.ilk -*.meta -*.obj -*.iobj -*.pch -*.pdb -*.ipdb -*.pgc -*.pgd -*.rsp -*.sbr -*.tlb -*.tli -*.tlh -*.tmp -*.tmp_proj -*.log -*.vspscc -*.vssscc -.builds -*.pidb -*.svclog -*.scc - -# Chutzpah Test files -_Chutzpah* - -# Visual C++ cache files -ipch/ -*.aps -*.ncb -*.opendb -*.opensdf -*.sdf -*.cachefile -*.VC.db -*.VC.VC.opendb - -# Visual Studio profiler -*.psess -*.vsp -*.vspx -*.sap - -# Visual Studio Trace Files -*.e2e - -# TFS 2012 Local Workspace -$tf/ - -# Guidance Automation Toolkit -*.gpState - -# ReSharper is a .NET coding add-in -_ReSharper*/ -*.[Rr]e[Ss]harper -*.DotSettings.user - -# JustCode is a .NET coding add-in -.JustCode - -# TeamCity is a build add-in -_TeamCity* - -# DotCover is a Code Coverage Tool -*.dotCover - -# AxoCover is a Code Coverage Tool -.axoCover/* -!.axoCover/settings.json - -# Visual Studio code coverage results -*.coverage -*.coveragexml - -# NCrunch -_NCrunch_* -.*crunch*.local.xml -nCrunchTemp_* - -# MightyMoose -*.mm.* -AutoTest.Net/ - -# Web workbench (sass) -.sass-cache/ - -# Installshield output folder -[Ee]xpress/ - -# DocProject is a documentation generator add-in -DocProject/buildhelp/ -DocProject/Help/*.HxT -DocProject/Help/*.HxC -DocProject/Help/*.hhc -DocProject/Help/*.hhk -DocProject/Help/*.hhp -DocProject/Help/Html2 -DocProject/Help/html - -# Click-Once directory -publish/ - -# Publish Web Output -*.[Pp]ublish.xml -*.azurePubxml -# Note: Comment the next line if you want to checkin your web deploy settings, -# but database connection strings (with potential passwords) will be unencrypted -*.pubxml -*.publishproj - -# Microsoft Azure Web App publish settings. Comment the next line if you want to -# checkin your Azure Web App publish settings, but sensitive information contained -# in these scripts will be unencrypted -PublishScripts/ - -# NuGet Packages -*.nupkg -# The packages folder can be ignored because of Package Restore -**/[Pp]ackages/* -# except build/, which is used as an MSBuild target. -!**/[Pp]ackages/build/ -# Uncomment if necessary however generally it will be regenerated when needed -#!**/[Pp]ackages/repositories.config -# NuGet v3's project.json files produces more ignorable files -*.nuget.props -*.nuget.targets - -# Microsoft Azure Build Output -csx/ -*.build.csdef - -# Microsoft Azure Emulator -ecf/ -rcf/ - -# Windows Store app package directories and files -AppPackages/ -BundleArtifacts/ -Package.StoreAssociation.xml -_pkginfo.txt -*.appx - -# Visual Studio cache files -# files ending in .cache can be ignored -*.[Cc]ache -# but keep track of directories ending in .cache -!*.[Cc]ache/ - -# Others -ClientBin/ -~$* -*~ -*.dbmdl -*.dbproj.schemaview -*.jfm -*.pfx -*.publishsettings -orleans.codegen.cs - -# Including strong name files can present a security risk -# (https://github.com/github/gitignore/pull/2483#issue-259490424) -#*.snk - -# Since there are multiple workflows, uncomment next line to ignore bower_components -# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) -#bower_components/ - -# RIA/Silverlight projects -Generated_Code/ - -# Backup & report files from converting an old project file -# to a newer Visual Studio version. Backup files are not needed, -# because we have git ;-) -_UpgradeReport_Files/ -Backup*/ -UpgradeLog*.XML -UpgradeLog*.htm -ServiceFabricBackup/ -*.rptproj.bak - -# SQL Server files -*.mdf -*.ldf -*.ndf - -# Business Intelligence projects -*.rdl.data -*.bim.layout -*.bim_*.settings -*.rptproj.rsuser - -# Microsoft Fakes -FakesAssemblies/ - -# GhostDoc plugin setting file -*.GhostDoc.xml - -# Node.js Tools for Visual Studio -.ntvs_analysis.dat -node_modules/ - -# Visual Studio 6 build log -*.plg - -# Visual Studio 6 workspace options file -*.opt - -# Visual Studio 6 auto-generated workspace file (contains which files were open etc.) -*.vbw - -# Visual Studio LightSwitch build output -**/*.HTMLClient/GeneratedArtifacts -**/*.DesktopClient/GeneratedArtifacts -**/*.DesktopClient/ModelManifest.xml -**/*.Server/GeneratedArtifacts -**/*.Server/ModelManifest.xml -_Pvt_Extensions - -# Paket dependency manager -.paket/paket.exe -paket-files/ - -# FAKE - F# Make -.fake/ - -# JetBrains Rider -.idea/ -*.sln.iml - -# CodeRush -.cr/ - -# Python Tools for Visual Studio (PTVS) -__pycache__/ -*.pyc - -# Cake - Uncomment if you are using it -# tools/** -# !tools/packages.config - -# Tabs Studio -*.tss - -# Telerik's JustMock configuration file -*.jmconfig - -# BizTalk build output -*.btp.cs -*.btm.cs -*.odx.cs -*.xsd.cs - -# OpenCover UI analysis results -OpenCover/ - -# Azure Stream Analytics local run output -ASALocalRun/ - -# MSBuild Binary and Structured Log -*.binlog - -# NVidia Nsight GPU debugger configuration file -*.nvuser - -# MFractors (Xamarin productivity tool) working folder -.mfractor/ +# General +.DS_Store +.AppleDouble +.LSOverride + +# Icon must end with two \r +Icon + + +# Thumbnails +._* + +# Files that might appear in the root of a volume +.DocumentRevisions-V100 +.fseventsd +.Spotlight-V100 +.TemporaryItems +.Trashes +.VolumeIcon.icns +.com.apple.timemachine.donotpresent + +# Directories potentially created on remote AFP share +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk \ No newline at end of file diff --git a/README.md b/README.md index 6f8ab12..28aa4ec 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,18 @@ -# tip-calculator -Tip Calculator exercise for DMD 3475 +# Tip Calculator +An exercise in JavaScript function definitions and return values. Course: DMD 3475. + +## Introduction +Our tip calculator application is almost complete. Our function named `updateValues()` will fetch the values that were input by the user. + +At that point, the values are passed as arguments to two functions named `calculateTipPerPerson()` and `calculateTotalPerPerson()`. The values that are returned by each function are used to update the DOM. + +## Instructions + +1. Define both required functions: `calculateTipPerPerson()` and `calculateTotalPerPerson()`. +2. Each function should accept the 3 arguments being passed to them within the `updateValues()` function. +3. Using those values, calculate and return the appropriate answer. +4. Extra credit: Properly round the dollars and cents that are returned by your functions. + +## Helpful Information +* Search Google for "Tip Calculator" to see the desired functionality for this application. +* The `calculateTotalPerPerson()` function should return a value that includes the tip. \ No newline at end of file diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..03a3cac --- /dev/null +++ b/css/main.css @@ -0,0 +1,28 @@ +body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; +} + +.card { + width: 400px; + max-width: 100%; +} + +.card-image img { + height: 100px; + object-fit: cover; + object-position: center; +} + +.card-content .row { + margin: 0; +} + + +.card .card-image .card-title { + font-weight: bold; + text-shadow: 2px 2px 3px black; + padding-bottom: 12px; +} \ No newline at end of file diff --git a/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg b/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg new file mode 100644 index 0000000..1438da5 Binary files /dev/null and b/images/brooke-lark-pGM4sjt_BdQ-unsplash.jpg differ diff --git a/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg b/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg new file mode 100644 index 0000000..54a1fe1 Binary files /dev/null and b/images/camila-melim-yHQfZ9TuZn4-unsplash.jpg differ diff --git a/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg b/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg new file mode 100644 index 0000000..f83d585 Binary files /dev/null and b/images/claudia-crespo-ewOrvEa87j4-unsplash.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..656af4c --- /dev/null +++ b/index.html @@ -0,0 +1,58 @@ + + + + + + Tip Calculator + + + + + + + +
+
+ + Tip Calculator +
+
+
+
+
+
+ attach_money + + +
+
+ pie_chart + + +
+
+ group_add + + +
+
+
+
+
+
+
+
+ Tip (per person): $ +
+
+ Total (per person): $ +
+
+
+
+ + + + + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..3d770b9 --- /dev/null +++ b/js/script.js @@ -0,0 +1,42 @@ +/** + * Get references to each of the form inputs + */ +let total = document.querySelector('#total'); +let tip = document.querySelector('#tip'); +let people = document.querySelector('#people'); + +/** + * Whenever the fields are updated, we call + * the updateValues function. + */ +total.addEventListener('change', updateValues); +total.addEventListener('keyup', updateValues); +tip.addEventListener('change', updateValues); +tip.addEventListener('keyup', updateValues); +people.addEventListener('change', updateValues); +people.addEventListener('keyup', updateValues); + +/** + * We will need references for the span tags + * that we will use to output our results. + */ +let tipOutput = document.querySelector(".tipOutput"); +let totalOutput = document.querySelector(".totalOutput"); + +/** + * This function is run every time an input is changed + * by a user. + * + * @todo Write functions for calculateTipPerPerson() and calculateTotalPerPerson() + */ +function updateValues(event){ + + // Get the latest values from our form inputs + let totalValue = total.value; + let tipValue = tip.value; + let peopleValue = people.value; + + // Update the values on the screen + tipOutput.innerText = calculateTipPerPerson(totalValue, tipValue, peopleValue); + totalOutput.innerText = calculateTotalPerPerson(totalValue, tipValue, peopleValue); +}